/* =====================================================================================================================
   CLOEE2 � GRAPHIC CHARTER SETTINGS
   =====================================================================================================================

   Ce fichier regroupe l�ensemble des VARIABLES CSS constituant la base de la charte graphique du projet Cloee2.

   Ces variables d�finissent les r�gles globales du design system :
   - typographie (familles, tailles, graisses, line-height)
   - couleurs de marque et couleurs s�mantiques
   - espacements et dimensions des composants
   - bordures, ombres et rayons
   - styles des contr�les (inputs, boutons, composants UI)
   - r�gles globales d�apparence de l'application

   Les variables sont d�clar�es dans le scope ".cloee2" afin d��tre utilis�es par les diff�rentes feuilles de styles
   du projet (Components, Layout, Telerik overrides, etc.).

   Toutes les feuilles CSS du projet doivent se baser sur ces variables afin de garantir :
   - la coh�rence visuelle de l�application
   - la centralisation des r�gles de design
   - la maintenabilit� du code CSS
   - la facilit� d��volution de la charte graphique

   Toute nouvelle r�gle de design globale doit �tre ajout�e dans ce fichier
   afin de conserver une source unique pour les param�tres de la charte graphique.
===================================================================================================================== */

.ger {
    /* ============================================================
       TYPOGRAPHIE � Familles, tailles, graisses et hauteurs de ligne
       ============================================================ */
    --font-family: "Segoe UI", Arial, sans-serif;
    --font-xxs: 0.75rem; /* 12 px */
    --font-xs: 0.8125rem; /* 13 px */
    --font-sm: 0.875rem; /* 14 px */
    --font-md: 1rem; /* 16 px */
    --font-lg: 1.125rem; /* 18 px */
    --font-xl: 1.375rem; /* 22 px */
    --font-xxl: 1.75rem; /* 28 px */

    --font-size: var(--font-md);
    --font-label: var(--font-sm);
    --font-grid-cell: var(--font-sm);
    --font-grid-header: var(--font-xs);
    --font-legend: var(--font-lg);
    --line-height-tight: 1.25;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height: var(--line-height-normal);
    --line-height-heading: var(--line-height-tight);
    /* ============================================================
       COULEURS DE MARQUE & COULEURS S�MANTIQUES
       ============================================================ */
    --primary: #2f73a6;
    --primary-contrast: #ffffff;
    --secondary: #d7e6f3;
    --tertiary: #fdfdfd;
    --html-bg: color-mix(in srgb, color-mix(in srgb, var(--primary) 50%, var(--secondary) 50%) 60%, black 40%);
    --body-bg: color-mix(in srgb, var(--tertiary) 88%, var(--secondary) 12%);
    --body-sub-bg: color-mix(in srgb, var(--tertiary) 76%, var(--secondary) 24%);
    --body-content-bg: color-mix(in srgb, var(--tertiary) 94%, var(--secondary) 6%);
    --body-content: color-mix(in srgb, black 72%, var(--primary) 28%);
    --body-secondary-content: color-mix(in srgb, var(--body-content) 68%, var(--body-content-bg) 32%);
    --title: color-mix(in srgb, var(--primary) 82%, black 18%);
    --info: #2f73a6;
    --success: #0b7a3e;
    --error: #cc2f2f;
    --warning: #b45309;
    --help: #f1e3c1;
    /* ============================================================
       COMPOSANTS � En-t�tes, bordures et �tats
       ============================================================ */
    --component-header-background: var(--body-content-bg);
    --component-header-content: var(--body-content);
    --component-header-hover-content: var(--primary-contrast);
    --component-header-selected-color: var(--primary-contrast);
    --component-header-selected-background: color-mix(in srgb, var(--primary) 60%, var(--tertiary) 40%);
    --component-header-hover-background: color-mix(in srgb, var(--primary) 84%, var(--tertiary) 16%);
    --grid-line-hover-background: color-mix(in srgb, var(--primary) 50%, var(--body-content-bg) 50%);
    --border-color: color-mix(in srgb, var(--secondary) 78%, var(--primary) 22%);
    /* ============================================================
       FORMES, OMBRES & FOCUS
       ============================================================ */
    --radius-sm: 4px;
    --radius-md: 8px;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, .10);
    /* ============================================================
       CHAMPS DE SAISIE (inputs, selects, textarea)
       ============================================================ */
    --input-bg: #ffffff;
    --input-border: color-mix(in srgb, var(--primary) 55%, var(--secondary) 45%);
    --input-text: var(--body-content);
    --input-placeholder: #8b96a3;
    /* ============================================================
       BOUTONS & �TATS D�SACTIV�S
       ============================================================ */
    --primary-button: color-mix(in srgb, var(--primary) 82%, var(--tertiary) 18%);
    --button-calendar-bg: color-mix(in srgb, var(--primary) 8%, var(--tertiary) 92%);
    --button-calendar-border: color-mix(in srgb, var(--secondary) 70%, var(--primary) 30%);
    --disabled-bg: color-mix(in srgb, var(--tertiary) 92%, black 8%);
    --disabled-border: color-mix(in srgb, var(--border-color) 70%, var(--body-content) 30%);
    --disabled-text: color-mix(in srgb, var(--body-content) 42%, var(--tertiary) 58%);
    --disabled-icon-opacity: 0.45;
    /* ============================================================
       DIMENSIONS DES CONTR�LES
       ============================================================ */
    --control-height: 28px;
    --control-padding-x: var(--space-8);
    --control-padding-y: var(--space-4);
    --button-padding-x: var(--space-16);
    --button-padding-y: var(--space-4);
    /* ============================================================
       ESPACEMENTS (syst�me d��chelle)
       ============================================================ */
    --space-2: 2px;
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    /* ============================================================
       IC�NES � tailles visuelles et zones de rendu
       ============================================================ */
    /* Taille du glyphe / pictogramme */
    /* Alias compatibilit� avec l�existant */
    --icon-sm-size: 13px;
    --icon-md-size: 18px;
    --icon-lg-size: 28px;
    --icon-xl-size: 36px;
    /* Zone occup�e par une ic�ne simple (tooltip, info, d�corative) */
    --icon-box-sm: 16px;
    --icon-box-md: 20px;
    --icon-box-lg: 24px;
    --icon-box-xl: 36px;
    /* Zone cliquable pour les ic�nes bouton */
    --icon-action-box-sm: 20px;
    --icon-action-box-md: 24px;
    --icon-action-box-lg: 28px;
    --icon-action-box-xl: 40px;
    /* Param�tres transverses */
    --icon-padding: 2px;
    --icon-stroke-weight: var(--font-weight-regular);
    --icon-action-stroke-weight: var(--font-weight-medium);
    /* ============================================================
       CONTENEURS
       ============================================================ */
    --popup-container-padding: var(--space-16);
    --form-container-padding: var(--space-16);
    --website-container-padding: var(--space-24);
}

/* ==========================================================================
   DOCUMENTATION GLOBALE
   Fichier : Global.css

   Ce fichier contient surtout des règles historiques / transverses :
   - ancien bouton framework : .SFWK_Button
   - conteneurs d'édition : .SFWKEditPage
   - Telerik RadTabStrip : .SFWKTabContainer_TabStrip / .rts*
   - footer global et quelques règles applicatives diverses

   Pour les composants modernes de la charte, privilégier en premier les fichiers :
   GraphicCharter/Components/*.css
   ========================================================================== */
/* Règles CSS historiques pour l'ancien composant bouton framework : .SFWK_Button */
.SFWK_Button {
    margin: 0px 0px 0px var(--space-4);
    width: auto;
    min-width: 95px;
}
/*SFWKEditPage*/
.SFWKEditPage {
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    height: 600px;
}

.SFWKEditPage_Invalid {
    border-width: 1px;
    border-color: #C20202;
    border-style: solid;
    height: 600px;
}

.SFWKEditPage td {
    color: #212F41;
    font-size: 11pt;
    font-weight: var(--font-weight-bold);
}

html body .riSingle .riTextBox .riDisabled, html body .riSingle .riTextBox[type="text"] .riDisabled, html body .riSingle .riTextBox[type="password"] .riDisabled {
    border-color: Gray;
}

.riTextBox[alt] {
    border-color: #768CA5 !important;
}
/************************************************************************/
/*                      Onglets                                         */
.SFWKTabContainer_TabStrip.RadTabStrip_Default {
    background-color: #ffffff;
}

.SFWKTabContainer_TabStrip.RadTabStrip_Default .rtsLI, .SFWKTabContainer_TabStrip.RadTabStrip_Default .rtsLink {
    font-size: 14px;
}

.SFWKTabContainer_TabStrip .rtsLevel .rtsSelected {
    background-color: var(--component-header-selected-background);
    color: var(--component-header-selected-color);
}
/* info */
/* none */
.infoMessageImageNone {
    display: none;
}
/* footer */
#footer_titre {
    float: left;
    text-align: left;
    color: color-mix(in srgb, var(--primary) 15%, var(--secondary) 85%);
}

#footer_logo {
    background-image: url(../Images/login-sien.png);
    margin-right: var(--space-4);
    width: 68px;
    height: 32px;
    float: left;
}

#footer_texte {
    float: right;
    text-align: right;
    color: color-mix(in srgb, var(--primary) 15%, var(--secondary) 85%);
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    border: 0;
    outline: 0;
    background-color: transparent;
}

th, td {
    vertical-align: top;
}

.Unbold {
    font-weight: normal !important;
}

.blocFormulaireBoutons {
    width: 100%;
    text-align: right;
}

.blocFormulaireBoutonsFooter {
    margin-top: var(--space-16);
    margin-bottom: var(--space-4);
}

body {
    margin: 0;
    padding: 0;
    font: var(--font-family);
    background-color: var(--html-bg);
}

#container {
    background-color: #ffffff;
    min-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    padding: var(--form-container-padding);
}

#grand_bloc {
    height: auto;
    width: auto;
    min-width: 1120px;
}

#marge_haut {
    height: 10px;
}

#top {
    width: auto;
    height: 155px;
}

#top_left {
    background-image: url(../Images/fond_haut_left.gif);
    background-position: top left;
    background-repeat: no-repeat;
    width: auto;
    height: 145px;
    margin: 0 0 0 var(--space-4);
    bottom: 0;
}

#top_right {
    background-image: url(../Images/fond_haut_right.gif);
    background-position: top right;
    background-repeat: no-repeat;
    width: auto;
    height: 145px;
    margin: -155px 0 0 0;
    bottom: 0;
}

#global_navigation {
    position: relative;
    z-index: 1000;
    left: -50px;
    top: -4px;
}

.GridWithoutFrozenColumns .rgDataDiv {
    overflow-x: scroll !important;
}

.GridWithoutHorizontalScrollbar .rgDataDiv {
    overflow-x: hidden !important;
}

.cegGridNoHeight .rgDataDiv {
    height: auto !important;
}

.spanBarre {
    margin: 0 var(--space-16) 0 var(--space-16);
}

.texteBassinVide {
    margin: 0 var(--space-4) 0 var(--space-4);
    font-style: italic !important;
    vertical-align: text-bottom;
}

.texteBassinRenseigne {
    margin: 0 var(--space-4) 0 var(--space-4);
    vertical-align: text-bottom;
}

    .texteBassinRenseigne > b {
        vertical-align: text-bottom;
    }

.spanExport {
    display: inline-block;
}

#top_content {
    width: auto;
    height: 140px;
    position: relative;
    border: var(--border-color) 1px solid;
}

#arrondihaut_top {
    width: auto;
    height: auto;
    bottom: 0;
    background: #d0d0d0;
}

#arrondihaut_top_right {
    background-position: top right;
    background-repeat: no-repeat;
    width: auto;
    height: 23px;
}

#contentcenter_top {
    width: 100%;
    height: 80px;
    position: relative;
    top: 0px;
    left: 0px;
}

#identite_ecole_et_utilisateur {
    float: left;
    height: 88px;
    margin: 8px var(--space-12) 0 var(--space-12);
}

#infowrapper {
    float: left;
    height: 88px;
    min-width: 100px;
    width: 22%;
    margin: var(--space-8) var(--space-12) 0 0;
    border: 1px solid var(--border-color);
}

#info {
    margin: 0px 0px 0px 3px;
    height: 88px;
    overflow-y: scroll;
    -ms-overflow-x: hidden;
}

#domaine {
    float: left;
    height: 88px;
    width: 115px;
    border-right: var(--border-color) 1px solid;
    margin: var(--space-8) var(--space-12) var(--space-4) 0;
}

#domaine_logo {
    float: left;
}

#domaine_logo_image {
    cursor: pointer;
    float: left;
    margin: var(--space-4) 0 0 2px;
    gap: var(--space-4);
    display: inline-grid;
}

#domaine_logo img {
    vertical-align: middle;
}

/* container stack */
#domaine_logo_image .fa-stack {
    position: relative;
    height: auto !important;
    width: auto !important;
}

    /* icône overlay (plus / loupe) */
    #domaine_logo_image .fa-stack .fa-stack-overlay {
        position: absolute;
        font-size: 9px;
        color: var(--info);
        border-radius: 50%;
        padding: 2px;
        line-height: 1;
    }

    /* position TOP RIGHT (étoile +) */
    #domaine_logo_image .fa-stack .overlay-top-right {
        top: -6px;
        right: -3px;
    }

    /* position BOTTOM LEFT (livre + loupe) */
    #domaine_logo_image .fa-stack .overlay-bottom-left {
        top: -6px;
        right: -3px;
    }

#domaine_logo_image icon-action {
    display: block !important;
}

#domaine_logo_image a {
    display: block !important;
    vertical-align: middle;
    align-items: center;
    align-content: center;
}

#domaine_logo_image .icon-action {
    height: calc(var(--icon-md-size) + 8px);
    width: calc(var(--icon-md-size) + 8px);
    vertical-align: middle;
}

#domaine_titre {
    font-size: 11px;
    color: #000000;
    margin: var(--space-4) 0 0 var(--space-4);
}

/* ===== CONTEXTE GENERAL ===== */
#infoPanel.cgStack {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    width: max-content;
    float: left;
    margin-top: var(--space-4);
}

    #infoPanel.cgStack .cgYear {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4);
    }

    #infoPanel.cgStack #infoPanel_ecole,
    #infoPanel.cgStack #infoPanel_centre {
        display: grid;
        align-items: center;
    }

        #infoPanel.cgStack #infoPanel_ecole .RadComboBox,
        #infoPanel.cgStack #infoPanel_centre .RadComboBox {
            grid-column: 2;
            width: 102px !important;
        }

    #infoPanel.cgStack #infoPanel_annee_moins,
    #infoPanel.cgStack #infoPanel_annee_plus {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #infoPanel.cgStack #infoPanel_annee_moins input,
        #infoPanel.cgStack #infoPanel_annee_plus input {
            display: block;
        }

#infoPanel_info_base {
    height: 20px;
    text-align: center;
    font-size: 11px;
}

    #infoPanel_info_base .base_not_prod {
        color: red;
        font-weight: var(--font-weight-bold);
    }

    #infoPanel_info_base .base_prod {
        color: black;
        font-weight: normal;
    }

#contexte_de_travail_multiple {
    height: 100%;
}

#ecoleCentre {
    float: left;
    margin-left: var(--space-8);
    color: var(--title);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-bold);
}

#infos {
    float: right;
    width: 45px;
    margin-right: -87px;
    line-height: var(--line-height-normal);
}

.InfosLink {
    color: var(--title);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
}

.ger #domaine_titre {
    font-size: var(--font-xs);
    color: var(--title);
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-8);
    margin-bottom: var(--space-8);
}

/* Container principal */
#utilisateur {
    display: flex;
    align-items: center;
    margin-right: var(--space-16);
    margin-bottom: var(--space-4);
}

/* Bloc infos utilisateur */
#utilisateur_infos {
    flex: 1;
    min-width: 0;
    margin-left: var(--space-8);
}



/* Nom utilisateur */
#ctl00_ctl00_MainContent_txtNomUser {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-semi-bold);
}

#imbLogout:before {
    width: var(--icon-md-size);
    height: var(--icon-md-size);
}

#outer[id] {
    position: static;
}

#inner[id] {
    position: static;
}

#outer {
    height: 36px;
    overflow: hidden;
}

#middle {
    text-align: center;
    align-content: center;
}

#inner {
    position: relative;
    top: -50%;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#outer,
#middle,
#inner {
    display: block;
    align-content: center;
}

    #inner img {
        vertical-align: middle;
    }

#arrondibas_top {
    background-image: url(../Images/arrondibas_top_content_short.png);
    background-repeat: no-repeat;
    width: 169px;
    height: 23px;
    bottom: 0;
}

#arrondibas_top_right {
    width: auto;
    height: 22px;
    border-bottom: #212f41 1px solid;
    margin: -23px 0 0 169px;
}

#contexte_de_travailContainer {
    float: left;
    width: clamp(320px, 28vw, 520px);
    min-width: 320px;
    height: auto;
    min-height: 98px;
    margin: 8px 0 0 10px;
    display: block;
    overflow: visible;
    box-sizing: border-box;
}

#contexte_de_travail_Multiple {
    width: 100%;
}

    #contexte_de_travail_Multiple > table {
        width: 100%;
        margin-left: 0 !important;
        table-layout: auto;
    }

        #contexte_de_travail_Multiple > table td {
            vertical-align: middle;
        }

            #contexte_de_travail_Multiple > table td:last-child {
                width: 100%;
                white-space: normal;
                line-height: var(--line-height-normal);
            }

                #contexte_de_travail_Multiple > table td:last-child > span {
                    display: block;
                    margin-left: var(--space-8) !important;
                    overflow-wrap: anywhere;
                }

#contexte_de_travail {
    line-height: var(--line-height-normal);
    overflow: visible;
}

    #contexte_de_travail span {
        max-width: 100%;
    }

#content_haut {
    padding: var(--space-2);
    width: auto;
    height: 23px;
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
}

.title-sub-domain {
    margin-left: var(--space-8);
}

#content_intermede {
    background-image: url(../images/fond_container_left.gif);
    background-position: left;
    background-repeat: repeat-y;
    overflow: visible;
    height: 25px;
}

#content {
    background-position: left;
    background-repeat: repeat-y;
    min-height: 500px;
    margin-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.WindowPopupContainer {
    position: absolute;
    top: 75px;
    margin-right: 50px;
    margin-left: 50px;
    box-shadow: 1px 2px 10px #888;
    z-index: 7000;
    background: #dae2e8 none repeat scroll 0 0;
    width: 90%;
}

.WindowPopupTitle {
    float: left;
    position: relative;
    width: 100%;
}

#imgMenuSousDomaine {
    border: 0px;
    cursor: pointer;
}

#zone_de_travail {
    width: auto;
    height: 100%;
    min-height: 500px;
    position: relative;
}

#footer {
    height: auto;
    bottom: 0;
    width: auto;
    margin: var(--space-12) var(--space-4) var(--space-12) var(--space-4);
    min-width: 1120px;
    line-height: 40px;
}

#footer_right {
    width: auto;
}

nobr.MailReadOnlyColumnNoBold > span > span.TextReadOnly {
    font-weight: normal;
}

.formulaire > tbody > tr:last-child > td, .formulaire > tr:last-child > td {
    padding-bottom: 0px;
}


.blocDansFormulaire {
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0;
}

.blocHeader {
    padding-bottom: var(--space-12);
}


.TableForRepeater > tbody > tr > td, .TableForRepeater > tr > td {
    margin: 0px;
    padding: 0px;
}

.rpTemplate {
    margin: var(--space-12);
}

.leftPanelBarContainer {
    float: left;
    position: relative;
}

.divBarTitle {
    width: 35px;
    position: relative;
}

.divRemarquesJura {
    width: 30%;
    float: left;
    display: table-cell;
}

.slidingDiv {
    border-style: solid solid solid hidden;
    background-color: #ffffff;
    position: absolute;
    top: 0px;
    left: 38px;
    z-index: 999;
    height: 579px;
    width: 250px;
    visibility: hidden;
    text-align: right;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-color: #3D556C;
    border-right-color: #3D556C;
    border-bottom-color: #3D556C;
}
/* Tooltip */
.ToolTipContainer {
    margin: 0px;
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    font-size: 12px;
    color: #000;
    padding: 0px;
    overflow-y: scroll;
    -ms-overflow-x: hidden;
}

.ToolTipTitle {
    margin: 2px;
    padding: 2px;
    font-weight: var(--font-weight-bold);
    font-size: 12px;
    color: #3D556C;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #3D556C;
}

.ToolTipBody {
    margin: 2px;
    padding: 2px;
    color: #666666;
    font-weight: normal;
}

    .ToolTipBody ul {
        list-style-type: disc;
        margin-left: -20px;
    }

.ToolTipDomaine {
    margin-left: var(--space-16);
}
/* FIN ToolTip */
/* SIEN DropDownList */
.gu_dropdownlist_error {
    margin-left: var(--space-8);
    color: Red;
}
/* SFWKTreeView */
.TreeViewSpanButton {
    cursor: pointer;
    display: block;
    width: 100px;
    border-width: thin;
    border-color: #212F41;
    background-color: white;
    border-style: solid;
    text-align: center;
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-24);
    font-size: xx-small;
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}
/* Fentre d'information */
#infosContent {
    width: 400px;
    height: 400px;
}
/* Fentre centre - cole */
#detailsEcoleCentre {
    width: 450px;
    height: 310px;
}
/* Fentres FlatWindow */
.flatWindowContent {
    position: absolute;
    z-index: 6100;
    background-color: #dae2e8;
    box-shadow: 1px 1px 30px #aaa;
}

.CommentWindow {
    width: 450px;
}

.flatWindowTitle {
    background-color: #337db3;
    color: white;
    padding: var(--space-8) var(--space-8) 4px var(--space-8);
    margin: 0px;
    cursor: default;
}

.flatWindowCloseImage {
    background-image: url(../Images/fermer.png);
    width: 21px;
    height: 21px;
    background-repeat: no-repeat;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

#modalWindowBackground {
    position: fixed;
    z-index: 6000;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-color: White;
    opacity: 0.6;
}
/* Fentre du choix d'un domaine */
#choixDomaineContent {
    width: 600px;
}

#choixDomaineBouton {
    text-align: right;
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 100%;
}

#choixFavorisBouton {
    text-align: left;
    position: absolute;
    bottom: 0px;
    left: 10px;
    width: 100%;
}

.divTableauChoixDomaine {
    position: absolute;
    left: 50%;
}

.domaineContent {
    width: 100px;
    height: 100px;
}

.domaineLogo {
    width: 100%;
    height: 83px;
    text-align: center;
}

.domaineTexte {
    width: 100%;
    height: 17px;
    text-align: center;
}

.divTableauChoixDomaine > table {
    border-spacing: 10px;
    border-collapse: separate;
}
/* Fin Fentre du choix d'un domaine */
/* Contrle Note */
.noteContainer {
    height: 300px;
    width: 300px;
    position: relative;
}

.notePunaise {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 20px;
    background-image: url(../Images/controles/punaise.png);
}

.notePostIt {
    background-color: #FCFB9D;
    padding: var(--space-24);
    position: relative;
    top: 50px;
    width: 260px;
    overflow: auto;
    border-radius: 4px;
    text-align: justify;
    box-shadow: 5px 5px 5px #888;
}
/* Fin Contrle Note */
/* zone de recherche pour arbre */
.TreeViewSearchContainer {
    border: 1px solid #2d3d4e;
    margin-top: var(--space-4);
}

.TreeViewSearchControles {
    margin: 8px 8px 8px 8px;
}

.TreeViewSearchTxtRecherche {
    margin-top: -1px;
}

.TreeViewSearchButRecherche {
    background-color: #CCCCCC;
    cursor: pointer;
    width: 110px;
    height: 20px;
    margin-left: var(--space-8);
    display: inline-block;
    text-align: center;
}

.TreeViweSearchButReset {
    background-color: #CCCCCC;
    cursor: pointer;
    width: 30px;
    height: 20px;
    margin-left: var(--space-8);
    display: inline-block;
    text-align: center;
}

.TreeViewSearchButPrev {
    background-color: #CCCCCC;
    cursor: pointer;
    width: 55px;
    height: 20px;
    margin-left: var(--space-8);
    display: inline-block;
    text-align: center;
}

.TreeViewSearchButSuiv {
    background-color: #CCCCCC;
    cursor: pointer;
    width: 55px;
    height: 20px;
    margin-left: var(--space-8);
    display: inline-block;
    text-align: center;
}

.cegTreeCurrentSearchNode {
    background-color: #bf9899;
}

.cegTreeSearchNode {
    background-color: var(--component-header-selected-background);
}

.cegTreeNode {
    background-color: transparent;
}
/* /zone de recherche pour arbre */
/* fentre des favoris */
#divFavorisWrapper {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
}

#divFavorisBouton {
    text-align: right;
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 100%;
}

.tdCodeCtrlSaisieCode {
    text-align: left;
    width: 90%;
}

.tdCodeCtrlSaisieCodeSuppression {
    text-align: right;
    vertical-align: middle;
    width: 5%;
}

.tdLibelleFavori {
    text-align: left;
    width: 90%;
}

.tdModifierLibelleFavori {
    text-align: right;
    vertical-align: middle;
    width: 5%;
}

.tdSuppressionFavori {
    text-align: right;
    vertical-align: middle;
    width: 5%;
}

.boutonModifierLibelleFavori {
    cursor: pointer;
}

.boutonSuppression {
    cursor: pointer;
}

.boutonAjout {
    cursor: pointer;
}
/* /fentre des favoris */
/* JCC: RadComboBox disabled style for pickers use -> Input field disable when picking values */
div.RadComboBox .rcbDisabled, div.RadComboBox .rcbDisabled .rcbInputCell .rcbInput {
    color: Gray !important;
    border-color: Gray !important;
}
/* Fentre popup (picker, ...) */
.WindowPopupContent {
    height: 100%;
}

.WindowPopupBody {
    height: auto;
    min-height: 95%;
}

#defaultPage {
    background-color: var(--html-bg);
    padding: var(--website-container-padding);
}

#popupPage {
    background-color: #ffffff;
}
/* CegHoraire */
.controle {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.liste {
    visibility: hidden;
    position: absolute;
    bottom: 5px;
}

.panier {
    float: left;
    padding: var(--space-4);
    margin-left: var(--space-8);
    margin-right: var(--space-8);
    background: #C6DBEC;
    border: 2px solid var(--border-color);
}

.horaire {
    margin-left: 8px;
}

    .horaire table {
        width: 100%;
    }

    .horaire td {
        text-align: center;
        background: #C6DBEC;
        border: 1px solid var(--border-color);
    }

        .horaire td.drop {
            background: #DAE2E8;
            border-radius: 6px 6px 6px 6px;
        }

        .horaire td.survol {
            background: var(--component-header-selected-background);
        }

.valeur {
    text-align: center;
    font-family: Calibri;
    border: 1px solid #010101;
    background: #FEFEFE;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 1px 1px 2px #555;
}

.valeurSave {
    text-align: center;
    font-family: Calibri;
    border: 1px solid #010101;
    background: #FEFEFE;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 1px 1px 2px #555;
}

.nb {
    text-align: center;
    border: 1px solid #010101;
    background: #FEFEFE;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 1px 1px 2px #555;
    font-family: Calibri;
}

.assigne {
    border: 1px solid #010101;
}

.heure {
    font-family: Calibri;
}

.periode0 {
    background: #bababa;
}

.drag {
    z-index: 999999;
}

.classDispo {
    background-color: #66b1f2;
}

.classOccupe {
    background-color: #f92020;
}

.classIndispo {
    background-color: Transparent;
}

.classCompleteOK {
    background-color: #1df25d;
}

.classCompleteKO {
    background-color: #f92020;
}

.classCompleteOKConfirmeKO {
    background-color: #FCB320;
}

.classPasAbsent {
    background-color: #A6AFB2;
}

.classCompleteOKConfirmeKOBloqued {
    background-color: #E1EF21;
}
/* CegWaitPanel */
.divWaitPanel {
    width: 100%;
    margin-top: 150px;
    text-align: center;
    font-weight: var(--font-weight-bold);
}

.centerWaitPanel {
    text-align: center;
}

.labelWaitPanel {
    width: 100%;
    margin-top: 233px;
    text-align: center;
}
/* FIN CegWaitPanel */
/* CegPicker */
.RadButton_Default.RadButton.CegPhoneButtonCH,
.RadButton_Default.RadButton.CegPhoneButtonEtranger {
    border-radius: 6px;
    font-weight: var(--font-weight-bold);
    height: 23px;
}

.RadButton_Default.RadButton.CegPhoneButtonCH {
    margin-left: 3px;
}

.RadButton_Default.RadButton.CegPhoneButtonEtranger {
    margin-left: 2px;
}

.RadButton_Default.RadButton.rbLinkButton.CegPhoneButtonCH, .RadButton_Default.RadButton.rbLinkButton:hover.CegPhoneButtonCH,
.RadButton_Default.RadButton.rbLinkButton.CegPhoneButtonEtranger, .RadButton_Default.RadButton.rbLinkButton:hover.CegPhoneButtonEtranger {
    background: #ffffff;
    color: #768ca5;
}

.RadButton_Default.RadButton.rbLinkButtonChecked.CegPhoneButtonCH, .RadButton_Default.RadButton.rbLinkButtonChecked:hover.CegPhoneButtonCH,
.RadButton_Default.RadButton.rbLinkButtonChecked.CegPhoneButtonEtranger, .RadButton_Default.RadButton.rbLinkButtonChecked:hover.CegPhoneButtonEtranger {
    background: var(--component-header-hover-background) !important;
    color: #ffffff;
}
/* Cette classe permet de ne plus afficher la croix dans les textbox de type CegPhone */
span.CegPhoneTextBoxHideCross > span > input[type=text]::-ms-clear {
    display: none;
}
/* FIN CegPhone */
div.label > label {
    color: #5C5C5C;
    white-space: nowrap;
}

div.fieldWithoutLabel {
    padding-top: var(--space-24);
}
/* Utilis dans la Popup intermdiaire lors de la synchro du dossier intervenant avec la BDP */
div.labelColor, div.fieldColor {
    padding-left: var(--space-12);
    background-color: #FFA6A6;
    margin-right: -4px;
}
/* Utilis dans la Popup intermdiaire lors de la synchro du dossier intervenant avec la BDP */
.tr-background-color {
    background-color: #FFA6A6;
}

div.fieldColor {
    margin-bottom: var(--space-12);
    background-color: #FFA6A6;
}

.PasAdresseCourante .TextReadOnly {
    color: var(--error) !important;
    font-weight: var(--font-weight-bold);
}
/* FIN TextReadOnly */
/* DropDownList */
select[disabled="disabled"] {
    background: none;
    background-color: #DAE1E8;
}
/* FIN DropDownList */
/* CegEditDialog */
.spanLink {
    font-size: small;
    text-decoration: underline;
    cursor: pointer;
}
/* FIN CegEditDialog */
/* CegAccordeon */
.RadPanelBar_Style {
    display: block !important;
}
/* FIN CegAccordeon */
/* Wizard SIEN */
.gu_wizard {
    background-color: #f0f4f6;
    margin: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
}

.gu_wizard_step_content {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.gu_wizard_toolbar {
    padding-bottom: var(--space-4);
    text-align: right;
}

.gu_wizard_tab_step {
    background-color: var(--component-header-selected-background);
    background-image: none !important;
    color: #dbe3e9;
    font-size: 13px;
    line-height: 2;
    border: var(--border-color) 1px solid;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

.gu_wizard_tab_step_selected {
    background-color: #f0f4f6;
    background-image: none !important;
    color: #5a7992;
    font-size: 13px;
    line-height: 2;
    border: #99acd0 1px solid;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}
/* FIN Wizard SIEN */
/* Tabs (onglets) */
.gu_tabs_tab {
    background-color: var(--component-header-selected-background);
    background-image: none !important;
    color: #dbe3e9;
    font-size: 12px;
    line-height: 2;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: var(--space-4);
    border-radius: 3px 3px 0 0px;
}

.gu_tabs_selected_tab {
    background-color: #f0f4f6;
    background-image: none !important;
    color: #5a7992;
    font-size: 12px;
    line-height: 2;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: var(--space-4);
    border-right: #99acd0 1px solid;
    border-top: #99acd0 1px solid;
    border-left: #99acd0 1px solid;
    border-radius: 3px 3px 0 0px;
}

.gu_tabs_first_tab {
    margin-left: var(--space-32);
}

.gu_radtabstrip_multipageview {
    background-color: var(--body-sub-bg);
    border: var(--border-color) 1px solid;
    padding: var(--space-16);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.spacerHeightRadioButton {
    margin-top: 51px;
}

.parentAlignFieldSet {
    display: inline-flex;
    height: 100%;
    gap: var(--space-16);
    width: 100%;
    overflow: hidden;
}

.childAlignFieldSet {
    display: table-cell;
    height: inherit;
}

.Repeater fieldset {
    margin-top: var(--space-12);
    border: 1px solid var(--border-color);
    border-bottom: 0;
}

    .Repeater fieldset legend {
        font-weight: var(--font-weight-bold);
        color: var(--border-color);
        font-size: 14px;
    }

.Repeater .actions {
    margin-left: 2px;
    margin-right: 2px;
    background-color: var(--component-header-selected-background);
    padding: var(--space-12) var(--space-4) var(--space-4) var(--space-4);
    height: 20px;
    border: 1px solid var(--border-color);
    border-top: 0;
}

    .Repeater .actions span {
        color: white;
        font-weight: var(--font-weight-bold);
    }

    .Repeater .actions a {
        color: white;
        font-weight: var(--font-weight-bold);
        margin: 0px 3px 0px 3px;
    }

.Repeater .no_actions {
    border-bottom: 1px solid var(--border-color);
    margin-left: 2px;
    margin-right: 2px;
}
/* RepeaterWithAction */
.RepeaterWA .contenu {
    margin-top: var(--space-12);
    border: 1px solid var(--border-color);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
    border-bottom: 0;
}

.RepeaterWA .error {
    background-color: #FFA6A6;
}

.RepeaterWA .contenuWithoutAction {
    margin-top: var(--space-12);
    border: 1px solid var(--border-color);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
}

.RepeaterWA .actions span {
    color: white;
    font-weight: var(--font-weight-bold);
}

.RepeaterWA .actions a {
    color: white;
    font-weight: var(--font-weight-bold);
    margin: 0px var(--space-4) 0px var(--space-4);
}

.RepeaterWA .actions > div {
    display: inline-block;
}

.RepeaterWA .actions .actionsLeft > input, .RepeaterWA .actions .actionsRight > input {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.actionsLeft {
    float: left;
}

.actionsRight {
    float: right;
}

.actionsCenter {
    position: absolute;
    left: 44%;
}

    .actionsCenter > input {
        margin-left: var(--space-24);
        margin-right: var(--space-24);
    }
/* END RepeaterWithAction */
/* Dtail avis de mutation */
.tabAmDetail {
    border: 1px solid var(--border-color);
}

    .tabAmDetail > tbody > tr:nth-child(odd), .tabAmDetail > tr:nth-child(odd) {
        background-color: #FFFFFF;
    }

    .tabAmDetail > tbody > tr:nth-child(even), .tabAmDetail > tr:nth-child(even) {
        background-color: #DAE2E8;
    }

.tdAmDetailLibelle {
    text-align: right;
    font-weight: var(--font-weight-bold);
}

.trAmDetailValeur {
    padding: var(--space-4);
}
/* Fin Dtail avis de mutation */
div .AlignControls {
    margin-top: 0 !important;
    display: inline-block;
}
/* Liste droulante des annes scolaire */
.AnneeCourante {
    font-weight: 600;
}

.AnneePasCourante {
    color: var(--error) !important;
}

    .AnneePasCourante .rcbReadOnly .rcbInput {
        color: var(--error) !important;
    }
/* Fin liste droulante des annes scolaire */
/* DropDownList -> ItemError */
.ListItemInError {
    color: var(--error) !important;
}

.ListItemNotInError {
    color: #000000 !important;
}
/* Fin DropDownList -> ItemError */
/* Design du bouton de switch de privilge en mode DEBUG*/
.SwitchPrivilegeButton {
    float: right;
    color: white;
    padding-right: var(--space-12);
}

.SwitchPrivilegePopupButton {
    float: right;
    color: black;
    padding-right: var(--space-12);
}

input[type="checkbox"] {
    margin-top: var(--space-8);
}
/* Fin design du bouton de switch de privilge en mode DEBU */
/* CegUpload */
.fileUploadHidden {
    display: none;
}

.cegUplButton {
    background-color: #FFFFFF;
    background-image: none;
    border-color: #212F41;
    border-style: solid;
    border-width: 1px;
    color: #212F41;
    font-size: 10pt;
    font-weight: var(--font-weight-bold);
    height: 20px;
    line-height: 20px;
    padding: 0 var(--space-12) 0 var(--space-12);
    margin-left: 4px;
    width: 69px;
    cursor: default;
}

span.txtReadOnlyNoBold > span.TextReadOnly {
    font-weight: normal;
}

.uploadCEG > div > li {
    padding-bottom: var(--space-4);
}
/* Fin CegUpload */
.hideBtnToCatchEnterDefaultKey {
    background-color: transparent !important;
    border: none !important;
    font-size: 0;
    outline: none;
    display: none !important;
}

.divBtnLeftToRightAll {
    padding-bottom: var(--space-4);
}

.divBtnRightToLeftAll {
    padding-top: var(--space-4);
}

.divBtnLeftToRightAllVerticalDesign {
    text-align: center;
}

.divBtnRightToLeftAllVerticalDesign {
    text-align: center;
}
/****************************************************** Lancement de listes (RadPanel) ************************************************************************/
.RadPanelHeaderCategorieTexte {
    margin-left: var(--space-8);
}

.rpHeaderTemplate.rpExpanded .RadPanelHeaderCategorieImage {
    vertical-align: middle;
    display: block;
    float: right;
    margin-top: var(--space-4);
    margin-right: var(--space-8);
    width: 16px;
    height: 14px;
    background-image: url("../Images/icones/RadPanelHeaderUp_white.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.rpHeaderTemplate:not(.rpExpanded) .RadPanelHeaderCategorieImage {
    vertical-align: middle;
    display: block;
    float: right;
    margin-top: var(--space-4);
    margin-right: var(--space-8);
    width: 16px;
    height: 14px;
    background-image: url("../Images/icones/RadPanelHeaderDown.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.rpItem:not(.rpExpanded):hover > .rpHeaderTemplate .RadPanelHeaderCategorieImage {
    background-image: url('../Images/icones/RadPanelHeaderDown_white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.rpItem:has(.rpExpanded):hover > .rpHeaderTemplate .RadPanelHeaderCategorieImage {
    background-image: url('../Images/icones/RadPanelHeaderUp_white.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.RadPanelContentLink {
    margin-left: var(--space-8);
}

.RadPanelContentImageLinkForResume {
    width: 16px;
    height: 14px;
}
/* Lien lancement report */
.rpTemplate .gu_servicelink {
    color: #f19a5f;
    text-decoration: none;
    margin-left: var(--space-8);
}
/* Entretien parent */
.entretienParentRepeaterHeader {
    border-style: solid;
    border-color: var(--border-color);
    border-width: 1px;
    background-color: var(--component-header-selected-background);
}

.entretienParentRepeaterContent {
    border-style: solid;
    border-color: var(--border-color);
    border-width: 1px;
    background-color: #DAE2E8;
    margin: -4px;
}
/********************************************** menu des sous-domaines *************************************************/
.leftNavigationMenuItem {
    font-size: 12px;
    border-right: none;
    padding-left: var(--space-4);
}

    .leftNavigationMenuItem > a {
        text-decoration: none;
        color: #212f41;
        cursor: pointer;
        font-size: 16px;
        display: block;
    }

        .leftNavigationMenuItem > a:hover {
            text-decoration: none;
        }

.leftNavigationMenuItemImageContainer {
    width: 30px;
    float: left;
    margin-top: var(--space-4);
}

.leftNavigationMenuItemImage {
    width: 12px;
}

.sousDomaineMenuItem:hover {
    background-color: #DAE2E8 !important;
}
/* pas d'effet "hover" pour le menu des sous-domaines */
.leftNavigationMenu .rmText:hover {
    background: none !important;
}
/************************************************************************************************************************/
/**************************************************** Grille ************************************************************/
.GridButton {
    cursor: default;
    margin: 0 3px 0 3px;
    vertical-align: text-bottom;
}
/*Grille dynamique de saisie d'options individuelle*/
.OptionGrid_MainGroupe {
    overflow: auto;
    float: left;
}

.OptionGrid_TitreParent {
    background-color: var(--component-header-selected-background);
    color: var(--component-header-selected-color);
    display: block;
    padding: var(--space-4);
    margin-left: 3px;
    margin-right: 3px;
}

.OptionGrid_TitreParentVide {
    background-color: var(--component-header-selected-background);
    color: var(--component-header-selected-color);
    display: block;
    padding: var(--space-4);
    margin-left: 3px;
    margin-right: 3px;
    height: 19px;
}

.OptionGrid_EnfantGroupe {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

    .OptionGrid_EnfantGroupe > table {
        width: 100%;
        border-spacing: 0;
        border-collapse: collapse;
    }

.OptionGrid_TitreEnfant {
    font-weight: var(--font-weight-bold);
    padding: var(--space-4);
    background-color: #FFF;
}

.OptionGrid_TitreEnfant_Padding {
    padding: 2px !important;
}

.OptionGrid_Branche {
    width: auto;
    white-space: normal;
    overflow-wrap: break-word;
}

.OptionGrid_AlignBranche {
    vertical-align: middle;
}
/* Colonnes dynamiques */
.panelHidden {
    display: none;
}

.panelVisible {
    visibility: visible;
}
/*Grille dynamique de saisie d'options v2*/
.OptionGrid_but_tout,
.OptionGrid_but_rien {
    cursor: pointer;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Les classes Font Awesome utilisent ces variables.
       Elles évitent que .fa-solid/.fa-regular repassent l’icône en inline-block si la CSS Font Awesome est chargée après. */
    --fa-display: inline-flex;
    --fa-width: auto;
}

span.OptionGrid_but_tout,
span.OptionGrid_but_rien {
    width: 21px;
    height: 21px;
}

.OptionGrid_groupeniveau1 {
    background-color: var(--component-header-selected-background);
    text-align: center;
    color: var(--component-header-selected-color);
    border-left: rgb(218, 226, 232) 1px solid;
    border-right: rgb(218, 226, 232) 1px solid;
}

.OptionGrid_groupeniveau2 {
    background-color: var(--component-header-selected-background);
    text-align: center;
    color: var(--component-header-selected-color);
    border-left: rgb(218, 226, 232) 1px solid;
    border-right: rgb(218, 226, 232) 1px solid;
}

.OptionGrid_selectCellHeader {
    text-align: center;
    width: 50px;
}

.OptionGrid_selectCell {
    text-align: center;
    width: 50px;
    font-weight: var(--font-weight-bold);
}

.OptionGrid_row_header {
    background-color: white;
    font-weight: var(--font-weight-bold);
}

.OptionGrid_cellHeader_frozen {
    text-align: left;
    padding-right: var(--space-12);
}

.OptionGrid_cellHeader_nofrozen {
    text-align: center;
}

.OptionGrid_LeftBorder {
    border-left: rgb(218, 226, 232) 1px solid;
}

.OptionGrid_RightBorder {
    border-right: rgb(218, 226, 232) 1px solid;
}

.OptionGrid_cell {
    text-align: left;
    padding-right: var(--space-12);
}

.OptionGrid_cell_error {
    text-align: center;
    vertical-align: middle;
}

.OptionGrid_cellCheckbox {
    text-align: center;
    vertical-align: middle;
}

.OptionGrid_NoPadding {
    padding: 0px !important;
}


.OptionGrid_undobutton {
    width: 220px;
    border: #212F41;
    background-color: #FFFFFF;
    border-style: solid;
    border-width: 1px;
    padding-left: var(--space-24);
    margin-left: var(--space-12);
    color: #212F41;
    font-size: 10pt;
    font-weight: var(--font-weight-bold);
    height: 22px;
    cursor: default;
}

.OptionGrid_textBoxHidden {
    visibility: hidden;
}

.OptionGrid_panelContainer {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    margin: var(--space-12);
    font-size: var(--font-xs);
}

.OptionGrid_hautGaucheTablePanel, .OptionGrid_basGaucheTablePanel {
    float: left;
}

.OptionGrid_hautDroiteTablePanel {
    overflow-x: hidden;
    overflow-y: scroll;
}

.OptionGrid_basGaucheTablePanel {
    max-height: 400px;
    overflow-y: hidden;
    overflow-x: scroll;
}

.OptionGrid_basDroiteTablePanel {
    max-height: 400px;
    overflow: scroll;
}

.OptionGrid_frozenTablePanelContainer.non11OptionGrid {
    float: left;
}

.OptionGrid_nonFrozenTablePanelContainer.non11OptionGrid {
    overflow-x: scroll;
    overflow-y: visible;
}

.OptionGrid_frozenTablePanelContainer tr {
    height: 26px;
}

.OptionGrid_frozenTablePanelContainerDecalageTr {
    height: 26px !important;
}

.OptionGrid_nonFrozenTablePanelContainer tr {
    height: 26px;
}

.OptionGrid_frozenTablePanelContainer td {
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    padding-left: var(--space-4);
}

.OptionGrid_frozenTablePanelContainer.non11OptionGrid td {
    white-space: nowrap;
    display: table-cell;
    overflow: hidden;
    padding-left: var(--space-4);
}

.OptionGrid_cell_but_sel table {
    margin: auto;
}

.OptionGrid_nonFrozenTablePanelContainer td {
    white-space: nowrap;
}

.OptionGrid_frozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}

.OptionGrid_nonFrozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}
/* ClasseGrid */
.ClasseGrid_hautGaucheTablePanel, .ClasseGrid_basGaucheTablePanel {
    float: left;
}

.ClasseGrid_hautDroiteTablePanel {
    overflow-x: hidden;
    overflow-y: scroll;
}

.ClasseGrid_basGaucheTablePanel {
    max-height: 400px;
    overflow-y: hidden;
    overflow-x: scroll;
}

.ClasseGrid_basDroiteTablePanel {
    max-height: 400px;
    overflow: scroll;
}

.ClasseGrid_panelContainer {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    margin: var(--space-12);
    padding: var(--space-12);
}

.ClasseGrid_Header {
    background-color: var(--component-header-selected-background);
    text-align: center;
    color: var(--component-header-selected-color);
    border-left: rgb(218, 226, 232) 1px solid;
    border-right: rgb(218, 226, 232) 1px solid;
}

.ClasseGrid_classe_proj {
    background-color: var(--component-header-selected-background);
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    font-weight: var(--font-weight-bold);
    align-content: center;
    white-space: nowrap;
    font-size: var(--font-xs);
}

.ClasseGrid_Header_fm {
    background-color: white;
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    width: 26px;
}

.ClasseGrid_Counter {
    background-color: white;
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    align-content: center;
    text-align: center;
}

.ClasseGrid_Counter_Ls {
    background-color: #DAE2E8;
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
}

.ClasseGrid_Counter_NbPers {
    background-color: white;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
}

.ClasseGrid_Header_Ls {
    font-style: italic;
    color: forestgreen;
    float: right;
}

.ClasseGrid_Header_Ass {
    font-style: italic;
    float: right;
}

.ClasseGrid_row_header {
    background-color: white;
    font-weight: var(--font-weight-bold);
}

.ClasseGrid_classe_separate {
    border-right: 1px solid rgb(152, 172, 191) !important;
}

.ClasseGrid_alternateItemRow {
    background-color: #E6EDF3;
}

    .ClasseGrid_alternateItemRow > .ClasseGrid_radioButtonCell {
        border-left: 1px solid rgb(218, 226, 232);
        border-right: 1px solid rgb(218, 226, 232);
    }

.ClasseGrid_radioButtonCell {
    text-align: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: 3px;
}

.ClasseGrid_ItemRow {
    background-color: #DAE2E8;
}

    .ClasseGrid_ItemRow .ClasseGrid_radioButtonCell {
        border-left: 1px solid rgb(218, 226, 232);
        border-right: 1px solid rgb(218, 226, 232);
    }

.ClasseGrid_textBoxHidden {
    visibility: hidden;
}

.ClasseGrid_frozenTablePanelContainer tr {
    height: 24px;
}

.ClasseGrid_frozenTablePanelContainerDecalageTr {
    height: 26px !important;
}

.ClasseGrid_frozenTablePanelContainer tr,
.ClasseGrid_nonFrozenTablePanelContainer tr {
    height: 26px;
}

.ClasseGrid_basGaucheTablePanel > table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-wrap: break-word;
    margin-right: var(--space-4);
    margin-left: var(--space-4);
}

.ClasseGrid_hautGaucheTablePanel > table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-wrap: break-word;
    margin-right: var(--space-4);
    margin-left: var(--space-4);
}

.ClasseGrid_frozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}

.ClasseGrid_nonFrozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}
/* GroupeGrid */
.GroupeGrid_hautGaucheTablePanel, .GroupeGrid_basGaucheTablePanel {
    float: left;
}

.GroupeGrid_hautDroiteTablePanel {
    overflow-x: hidden;
    overflow-y: scroll;
}

.GroupeGrid_basGaucheTablePanel {
    max-height: 400px;
    overflow-y: hidden;
    overflow-x: scroll;
}

.GroupeGrid_basDroiteTablePanel {
    max-height: 400px;
    overflow: scroll;
}

.GroupeGrid_panelContainer {
    border-width: 1px;
    border-color: black;
    border-style: solid;
    margin: var(--space-12);
    padding: var(--space-12);
}

.GroupeGrid_Header {
    background-color: var(--component-header-selected-background);
    text-align: center;
    color: var(--component-header-selected-color);
    border-left: rgb(218, 226, 232) 1px solid;
    border-right: rgb(218, 226, 232) 1px solid;
}

.GroupeGrid_classe_proj {
    background-color: var(--component-header-selected-background);
    border-left: 2px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    font-weight: var(--font-weight-bold);
    align-content: center;
}

.GroupeGrid_Header_fm {
    background-color: white;
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    width: 26px;
}

.GroupeGrid_Counter {
    background-color: white;
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    align-content: center;
    text-align: center;
}

.GroupeGrid_Counter_Ls {
    background-color: #DAE2E8;
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
}

.GroupeGrid_Counter_NbPers {
    background-color: white;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    border-left: 2px solid rgb(218, 226, 232);
}

.GroupeGrid_Header_Ls {
    font-style: italic;
    color: forestgreen;
    float: right;
}

.GroupeGrid_row_header {
    background-color: white;
    font-weight: var(--font-weight-bold);
}

.GroupeGrid_niveau_separate {
    border-left: 2px solid rgb(152, 172, 191) !important;
}

.GroupeGrid_brancheHeader_separate {
    border-left: 4px solid rgb(218, 226, 232) !important;
}

.GroupeGrid_branche_separate {
    border-left: 4px solid rgb(152, 172, 191) !important;
}

.GroupeGrid_alternateItemRow {
    background-color: #E6EDF3;
}

    .GroupeGrid_alternateItemRow > .GroupeGrid_radioButtonCell {
        border-left: 2px solid rgb(218, 226, 232);
    }

.GroupeGrid_radioButtonCell {
    text-align: center;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: 3px;
}

.GroupeGrid_radioButtonCell_onError {
    background-color: #F19A5F;
}

.GroupeGrid_ItemRow {
    background-color: #DAE2E8;
}

    .GroupeGrid_ItemRow .GroupeGrid_radioButtonCell {
        border-left: 2px solid rgb(218, 226, 232);
    }

.GroupeGrid_textBoxHidden {
    visibility: hidden;
}

.GroupeGrid_frozenTablePanelContainer tr {
    height: 24px;
}

.GroupeGrid_frozenTablePanelContainerDecalageTr {
    height: 26px !important;
}

.GroupeGrid_nonFrozenTablePanelContainer tr {
    height: 24px;
}

.GroupeGrid_frozenTablePanelContainer td {
    white-space: nowrap;
}

.GroupeGrid_frozenTablePanelContainer > .GroupeGrid_row_header > td {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-wrap: break-word;
}

.GroupeGrid_hautGaucheTablePanel > table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-wrap: break-word;
    margin-right: var(--space-4);
    margin-left: var(--space-4);
}

.GroupeGrid_basGaucheTablePanel > table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    word-wrap: break-word;
    margin-right: var(--space-4);
    margin-left: var(--space-4);
}

.GroupeGrid_nonFrozenTablePanelContainer td {
    white-space: nowrap;
}

.GroupeGrid_frozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}

.GroupeGrid_nonFrozenTablePanelContainer table {
    border-collapse: separate;
    border-spacing: 0;
}
/************ AssemblageGrid ************/
.AssemblageGrid_panelContainer {
    overflow-x: scroll;
    overflow-y: visible;
}

.AssemblageGrid_matrice table {
    border-collapse: separate;
    border-spacing: 0;
}

.AssemblageGrid_assemblageActuel {
    text-align: center;
}

.AssemblageGrid_Header_Blue {
    background-color: var(--component-header-selected-background);
    color: var(--component-header-selected-color);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    font-weight: var(--font-weight-bold);
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_Header_fm {
    background-color: white;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    width: 26px;
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_Counter {
    background-color: white;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_separate {
    border-right: 2px solid rgb(152, 172, 191) !important;
}

.AssemblageGrid_Header_Ls {
    font-style: italic;
    color: forestgreen;
}

.AssemblageGrid_Counter_Ls, .AssemblageGrid_Counter_bra {
    background-color: #DAE2E8;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    color: black;
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_Counter_NbPers, .AssemblageGrid_Header_Bra {
    background-color: white;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_Counter_Bra_alternative {
    background-color: #E6EDF3;
    border-right: 2px solid rgb(218, 226, 232);
}

.AssemblageGrid_tableauBord tr {
    height: 24px;
}

.AssemblageGrid_tableauBord td {
    white-space: nowrap;
}

.AssemblageGrid_tableauBord table {
    border-collapse: separate;
    border-spacing: 0;
}
/************ TableauBord - Projection ************/
.linkTableauBordRight {
    float: right;
}

.TableauBord_Container {
    overflow-x: scroll;
    background: #dae2e8 none repeat scroll 0 0;
    float: left;
    width: 100%;
}

.TableauBord_Container_College {
    background: #dae2e8 none repeat scroll 0 0;
    float: left;
    width: 100%;
}

.TableauBord_FirstPart {
    display: flex;
    padding-left: var(--space-12);
}

.TableauBord_TableLeft {
    bottom: 0px;
}

.TableauBord_Table {
    border-collapse: separate;
    border-spacing: 0;
}

.TableauBord_rpFirstPart {
    display: flex;
    padding-left: var(--space-12);
}

    .TableauBord_rpFirstPart table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .TableauBord_rpFirstPart tr, .TableauBord_TableRight tr {
        height: 22px;
    }

.TableauBord_rpSecondPart {
    display: -webkit-box;
    margin-top: var(--space-12);
    padding-left: 47px;
}

    .TableauBord_rpSecondPart table {
        border-collapse: separate;
        border-spacing: 0;
    }

    .TableauBord_rpSecondPart > table > tbody > tr > td.TableauBord_Cell_Vide {
        width: 54px;
    }

.TableauBord_Header_Blue {
    background-color: var(--component-header-selected-background);
    border-left: 2px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    font-weight: var(--font-weight-bold);
    align-content: center;
}

.TableauBordOptions_Header_Blue {
    background-color: var(--component-header-selected-background);
    color: var(--component-header-selected-color);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    font-weight: var(--font-weight-bold);
    align-content: center;
}

.TableauBord_Header {
    background-color: white;
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    width: 35px;
}

.TableauBord_Header_Ls {
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
}

.TableauBord_Header_Total {
    background-color: white;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    border-left: 2px solid rgb(218, 226, 232);
}

.TableauBord_LivretSuivi {
    white-space: nowrap;
    min-width: 77px;
}

td.TableauBord_Cell_Vide {
    width: 50px;
}

.TableauBord_TableLeft > tbody > tr > td.TableauBord_Cell_Vide {
    height: 55px;
}

.TableauBord_TableRight > tbody > tr > td.TableauBord_Cell_Vide {
    height: 104px;
}

.TableauBord_TableRight > tbody > tr > td.TableauBord_Header_Total {
    border-left: 0px;
    width: 26px;
}

.TableauBord_Cell_SecondPart {
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
    width: 35px;
}

.TableauBordOptions_Cell_SecondPart {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
    width: 35px;
}

.TableauBord_alternateItemRow {
    background-color: #E6EDF3;
}

.TableauBord_ThirdPart {
    margin-top: var(--space-32);
    padding-left: var(--space-12);
    padding-bottom: var(--space-12);
}

    .TableauBord_ThirdPart > table {
        border-collapse: separate;
        border-spacing: 0;
        white-space: nowrap;
    }

.TableauBord_ThirdPart_Header_Bra {
    background-color: white;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    border-left: 2px solid rgb(218, 226, 232);
}

.TableauBord_separate {
    border-left: 2px solid rgb(152, 172, 191) !important;
}

.TableauBord_Cell_ThirdPart {
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
    width: 40px;
}

.TableauBord_CellBold_ThirdPart {
    border-left: 2px solid rgb(218, 226, 232);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    align-content: center;
    color: black;
    font-weight: var(--font-weight-bold);
}

.TableauBord_Cell_ClasseProj_ThirdPart {
    background-color: #DAE2E8;
}

.TableauBord_Cell_Counter {
    background-color: white;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
    border-left: 2px solid rgb(218, 226, 232);
}
/******************** Tableau before ventilation ********************/
.CheckBeforeVentilation_Container {
    margin-left: var(--space-12);
    padding-bottom: var(--space-12);
}

.CheckBeforeVentilation_Table {
    border-collapse: separate;
    border-spacing: 0;
}

.CheckBeforeVentilation_HeaderCell {
    align-content: center;
    background-color: var(--component-header-selected-background);
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
}

.CheckBeforeVentilation_Row {
    background-color: #e6edf3;
}

.CheckBeforeVentilation_FirstCell {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
}

.CheckBeforeVentilation_Cell {
    text-align: center;
    border-left: 1px solid rgb(152, 172, 191) !important;
}
/*************************************************** Dbut grilles statistique projections *****************************************************************/
.Grid_RepartitionHeaderCell {
    text-align: center;
    font-weight: var(--font-weight-bold);
    padding: var(--space-12);
}

.Grid_RepartitionDataRow {
    background-color: #dae2e8;
}

.Grid_RepartitionDataRowAlternate {
    background-color: #e6edf3;
}

.Grid_RepartitionDataRowTotalFirstLine > td {
    align-content: center;
    background-color: white;
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
}

.Grid_RepartitionDataRowTotalSecondLine > td {
    align-content: center;
    background-color: white;
    border-right: 1px solid rgb(218, 226, 232);
    border-left: 1px solid rgb(152, 172, 191) !important;
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
}

.Grid_RepartitionDataCell {
    text-align: center;
}

.Grid_RepartitionDataCellLeft {
    text-align: center;
    border-left: 1px solid rgb(152, 172, 191) !important;
}

.Grid_RepartitionDataCellRight {
    text-align: center;
}

.Grid_RepartitionDataCellLeftAndRight {
    text-align: center;
}

.Grid_RepartitionDataCellFirstColumn {
    padding-left: var(--space-12);
    text-align: center;
    font-weight: var(--font-weight-bold);
}

.Grid_RepartitionExportButtonRow > td {
    background-color: #dae2e8;
}

.Grid_RepartitionHeaderRow > td {
    align-content: center;
    background-color: var(--component-header-selected-background);
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: center;
}
/*************************************************** Fin grilles statistique projections *****************************************************************/
.Grid_CustomHeaderRow > th {
    background-color: var(--component-header-selected-background);
    border-left: 1px solid rgb(218, 226, 232);
    border-right: 1px solid rgb(218, 226, 232);
    color: var(--component-header-selected-color);
    font-weight: var(--font-weight-bold);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    text-align: left;
}

.Grid_CustomHeaderCell {
    font-weight: var(--font-weight-bold);
    padding: var(--space-4);
}

.Grid_CustomDataRow:nth-child(odd) {
    background-color: #dae2e8;
}

.Grid_CustomDataRow:nth-child(even) {
    background-color: #e6edf3;
}

.Grid_CustomDataRow > td {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}
/************************************************* Fin grilles "custom" ***************************************************************/
.spanLegend {
    cursor: default;
}

.choixAdresse {
    padding-left: var(--space-12);
    padding-bottom: var(--space-4);
    margin-bottom: -5px;
    margin-left: -2px;
    margin-right: -8px;
    background-color: #f5ddcd;
}

.choixAdresseError {
    padding-left: var(--space-12);
    padding-bottom: 0px;
    margin-bottom: -5px;
    margin-left: -2px;
    margin-right: -8px;
    border: 2px solid #c20202;
    background-color: #f5ddcd;
}

.hiddenControl {
    display:none !important;
    height: 1px;
}

.DateFilterTemplate_divMain {
    background: none repeat scroll 0 0 #DAE2E8;
    height: 160px;
    width: 300px;
    box-shadow: 2px 2px 10px #888;
    position: absolute;
}

.DateFilterTemplate_divHeader {
    font-size: xx-small;
    text-align: left;
}

.DateFilterTemplate_divPopupHeader, .Option_DateFilterTemplate_divPopupHeader {
    width: 100%;
    height: 30px;
    background: none repeat scroll 0 0 #337DB3;
    color: #FFF;
    text-align: center;
    line-height: 30px;
    font-size: medium;
}

div > .DateFilterTemplate_divPopupHeader > .DateFilterTemplate_btnCloseFiltre {
    position: absolute;
    top: 5px;
    right: 5px;
    border-style: none;
}

.DateFilterTemplate_rbBetween {
    padding-right: var(--space-12);
    vertical-align: middle;
}

.DateFilterTemplate_divMainHidden {
    visibility: hidden;
    height: 1px;
    width: 1px;
}

.DateFilterTemplate_divMain > table > tbody > tr > td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-bottom-width: 0px !important;
}

    .DateFilterTemplate_divMain > table > tbody > tr > td > .DateFilterTemplate_rbBetween > label {
        vertical-align: middle !important;
    }

    .DateFilterTemplate_divMain > table > tbody > tr > td > span {
        vertical-align: middle !important;
        padding-right: var(--space-4);
    }

td > .DateFilterTemplate_divHeader > table > tbody > tr > td > .DateFilterTemplate_btnOpenFiltre {
    border-style: none;
    height: 18px;
}

td > .DateFilterTemplate_divHeader > table > tbody > tr > td {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    border-bottom-width: 0px !important;
}

.LigneCloture {
    background-color: var(--secondary) !important;
}
/*************************************************** Dbut grilles projections *****************************************************************/
.HeaderEleve {
    background-color: #959ba8 !important;
}

.HeaderInscriptionActuelle {
    background-color: #d8eee6 !important;
}

.HeaderInscriptionProvisoire {
    background-color: #b9c0ce !important;
}

.HeaderIdentite {
    background-color: #eaeaea !important;
}

.HeaderDossier {
    background-color: #8ba4a4 !important;
}

.HeaderProjection {
    background-color: #c2b2bd !important;
}

.HeaderAideProjection {
    background-color: #cdcdcd !important;
}

.HeaderProvenance {
    background-color: #dae2e8 !important;
}

.LigneProjNonTerminee {
    background-color: #9ec1db !important;
}

.LigneProjBloquee {
    background-color: #fcc39c !important;
}

.LigneProjInvalide {
    background-color: #f4ddcc !important;
}

.LigneEntretienParentNotInMclClasse {
    background-color: #fcc39c !important;
}

.AideMessageForFiltreOption {
    background-color: #f5ddcd;
    background-image: url("../Images/fond-zone-aide-light.png");
    background-position: left center;
    background-repeat: no-repeat;
    border-top: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    padding: var(--space-4) var(--space-4) var(--space-4) 40px;
    max-width: 917px;
}
/***************************************************  Fin grilles projections  *****************************************************************/
.MultiSelectionList_TextBoxFiltre > span:first-child {
    width: 100% !important;
    color: #333;
}

    .MultiSelectionList_TextBoxFiltre > span:first-child > input:first-child {
        border-color: rgb(142, 142, 142);
        font-size: 12px !important;
        height: 19px;
    }

.MultiSelectionList_TextBoxFiltre {
    padding-right: var(--space-32);
}

.MultiSelectionList_TextBoxFiltre_Server {
    padding-right: 83px;
}

.MultiSelectionList_ButtonClear {
    margin: 2px;
    position: absolute !important;
    cursor: pointer !important;
    float: right;
    width: 21px;
    height: 21px;
}

.MultiSelectionList_ButtonClear_Server {
    margin: 2px;
    position: absolute !important;
    cursor: pointer !important;
    float: right;
    width: 21px;
    height: 21px;
    margin-left: var(--space-32);
}

.MultiSelectionList_ButtonFiltre {
    margin: 2px;
    position: absolute !important;
    cursor: pointer !important;
    float: right;
    width: 21px;
    height: 21px;
}

.LigneOptionLycee {
    white-space: nowrap;
}

.gu_textbox_text_lblCharacterCounter {
    margin-left: 1px;
    font-size: xx-small;
    font-style: italic;
    vertical-align: bottom;
    color: rgb(51, 51, 51);
}

.gu_textbox_text_commentaire_red {
    background-color: #fefec0 !important;
}

.gu_textbox_text_lblCharacterCounter_red {
    margin-left: 1px;
    font-size: xx-small;
    font-style: italic;
    vertical-align: bottom;
    color: #C20202;
    font-weight: var(--font-weight-bold);
}
/***************************************************  Dbut tableau de bord navigateur  *********************************************************/
.divEnteteTableauDeBord {
    height: 30px;
    background-color: #DAE2E8;
    padding: 0px var(--space-12);
}

.divEcoleCentreAnneeScolaire {
    float: left;
    display: inline-block;
}

.divMiseAJour {
    float: right;
    display: inline-block;
}
/***************************************************  Fin tableau de bord navigateur  ***********************************************************/
/***************************************************  GAN  **************************************************************************************/
.LigneAutorisationInvalide {
    background-color: #fcc39c !important;
}

.LigneBappPublieRepourvue {
    background-color: #fcc39c !important;
}

.LigneBappNonPublie {
    background-color: #DAE2E8 !important;
}

.LigneContratActif {
    background-color: #aac8ff !important;
}

.LigneContratCandidat {
    background-color: #B1F9C2 !important;
}

.LigneBappPublieOuverte {
    background-color: #B1F9C2 !important;
}

.LigneContratInactif {
    background-color: #fcc39c !important;
}

.LigneContratResilie {
    background-color: #e08c8b !important;
}

.LigneBappPassee {
    background-color: #fcc39c !important;
}

.LigneBappCourante {
    background-color: #B1F9C2 !important;
}

.LigneBappFuture {
    background-color: #aac8ff !important;
}
/***************************************************  GAN  **************************************************************************************/
/***************************************************  GRP  **************************************************************************************/
.LigneIntegrationAnticipee {
    background-color: #aac8ff !important;
}

.LigneMutationAnticipee {
    background-color: #B1F9C2 !important;
}

.LigneMutation {
    background-color: #aac8ff !important;
}
/***************************************************  GRP  **************************************************************************************/
/**********************************************************  Dbut valuations  *****************************************************************/
.btnCommentaire {
    margin: 0px 0px 0px 3px;
    background-color: #FFFFFF;
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    color: var(--primary-color) !important;
    font-size: 10pt;
    font-weight: var(--font-weight-bold);
    width: auto;
    height: 22px;
}

    .btnCommentaire:disabled {
        color: GrayText;
    }

.btnCommentaireSansNote {
    margin: 0px 0px 0px 63px;
    background-color: #FFFFFF;
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    color: #212F41;
    font-size: 10pt;
    font-weight: var(--font-weight-bold);
    width: auto;
    height: 22px;
}

.btnCommentaireSaisi {
    background-color: var(--component-header-selected-background) !important;
}

.btnCommentaireHasNotSaisieValeur {
    margin-left: 63px !important;
}

.MarginRightEvaluation {
    vertical-align: middle;
}

.EvaluationCommentButton {
    vertical-align: top;
}

.EvaluationLabelForEdit {
    vertical-align: middle;
}

.EvaluationLabelForEditInvalidee {
    vertical-align: middle;
    background-color: orange !important;
}

.EvaluationCommentButtonForEdit {
    position: relative;
    margin-left: 3px;
    vertical-align: top;
}

.EvaluationTooltip {
    position: relative;
    margin-left: 4px;
    vertical-align: middle;
}

.EvaluationEditButton {
    margin-left: 4px;
    vertical-align: middle;
}

.EvaluationEditButtonWithTooltip {
    margin-left: 4px;
    vertical-align: middle;
}

.TooltipWithoutComment:not([style*="visibility:hidden"]) {
    margin-left: var(--space-32);
}

.BoutonAvant,
.BoutonApres {
    width: calc(var(--control-height) + var(--space-4));
    min-width: calc(var(--control-height) + var(--space-4));
    height: var(--control-height) !important;
    padding: 0;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--button-calendar-bg) !important;
    color: var(--primary) !important;
    font-size: 18px !important;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    box-sizing: border-box;
    vertical-align: middle;
}

    .BoutonAvant:hover:not(:disabled):not(.aspNetDisabled),
    .BoutonApres:hover:not(:disabled):not(.aspNetDisabled) {
        background-color: var(--component-header-hover-background) !important;
        color: white !important;
    }

    .BoutonAvant:focus-visible,
    .BoutonApres:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .BoutonAvant:disabled,
    .BoutonApres:disabled,
    .aspNetDisabled.BoutonAvant,
    .aspNetDisabled.BoutonApres {
        background-color: var(--disabled-bg) !important;
        border-color: var(--disabled-border) !important;
        color: var(--disabled-color) !important;
        opacity: var(--disabled-icon-opacity);
        cursor: default !important;
    }

.BackgroundHeaderPeriodeNoteCourante {
    background: #ccc !important;
    font-weight: var(--font-weight-bold) !important;
}

.BackgroundItemPeriodeNoteCourante {
    background-color: var(--secondary);
}

.HeaderCommentaireCentre {
    text-align: center !important;
}

.SubHeaderCommentaire {
    font-weight: normal !important;
}

.BoutonValidationStatut {
    margin: 0px 0px 0px 3px;
    vertical-align: middle;
}

.Validation {
    margin: 0px 0px 0px 3px;
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    width: 22px;
    height: 22px;
    background: #FFFFFF url("../Images/icones/valide.png") no-repeat center !important;
    vertical-align: middle;
    float: right;
}

.Devalidation {
    margin: 0px 0px 0px 3px;
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    width: 22px;
    height: 22px;
    background: #FFFFFF url("../Images/icones/devalide.png") no-repeat center !important;
    vertical-align: middle;
    float: right;
}

.HoraireClick {
    cursor: pointer;
    text-decoration: underline;
}
/**********************************************************  Fin valuations  *******************************************************************/
/**********************************************************  Grille groupes-colonne  ************************************************************/
.TableColonne {
    width: 350px !important;
    margin-top: var(--space-4) !important;
}

.divPopupGroupes_hidden {
    display: none;
}

.divPopupGroupes_visible {
    background: none repeat scroll 0 0 #DAE2E8;
    box-shadow: 2px 2px 10px #888;
    position: fixed;
    text-align: left;
    z-index: 6001;
    width: 345px;
    padding: var(--space-8);
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -80px;
}

.GroupeColonneTemplate_divPopupHeader {
    width: 100%;
    height: 30px;
    background: none repeat scroll 0 0 #337DB3;
    color: #FFF;
    text-align: center;
    line-height: 30px;
    font-size: medium;
}

div > .GroupeColonneTemplate_divPopupHeader > .GroupeColonne_btnClose {
    position: absolute;
    top: 5px;
    right: 5px;
    border-style: none;
}

.GroupeColonneTemplate_btnAnnuler {
    width: 100px;
    float: right;
    background: none repeat scroll 0 0 #C4CED6;
    border: 1px solid #fff !important;
}

.GroupeColonneTemplate_btnAppliquer {
    width: 100px;
    float: left;
    background: none repeat scroll 0 0 #C4CED6;
    border: 1px solid #fff !important;
}

div > .GroupeColonne_btnClose {
    position: absolute;
    top: 5px;
    right: 5px;
    border-style: none;
}
/**********************************************************  Fin grille groupes-colonne  ********************************************************/
/***************************************************  Dbut Prfrences d'enseignement  2 niveaux  ********************************************/
span.N1 {
    font-weight: var(--font-weight-bold);
}

span.N2 {
    padding-left: var(--space-32);
}
/*************************************************************** Dbut facturation *************************************************************/
td.columnPrix {
    text-align: right;
    padding-right: var(--space-32);
}
/***************************************************************** Fin facturation *************************************************************/
/*************************************************************** Dbut Grille Pice Jointe *************************************************************/
.OnMouseHover_ChangePointer {
    cursor: pointer !important;
}

    .OnMouseHover_ChangePointer:hover {
        background-color: #c5c5c5 !important;
    }
/*************************************************************** Fin Grille Pice Jointe *************************************************************/
.SFWKActionBar_MainTable {
    width: 100%;
    height: 30px;
    background-color: var(--component-header-selected-background);
}

.SFWKActionBar_Row {
    width: 100%;
    vertical-align: bottom;
    height: 26px;
}

.SFWKActionBar_LeftCell {
    text-align: left;
    padding-bottom: 2px;
    vertical-align: bottom;
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: white;
    text-transform: uppercase;
}

.SFWKActionBar_Title {
    font-size: 10pt;
    font-weight: var(--font-weight-bold);
    color: #212F41;
    padding-left: var(--space-24);
    height: 100%;
}

.SFWKActionBar_ddlSubAction {
    margin: 0px var(--space-12) 0px var(--space-4);
    font-size: 10pt;
}

.infoFormulaireErrorHide {
    display: none;
}

.SFWK_ButtonDisabled {
    margin: 0px 0px 0px var(--space-4);
    width: auto;
    min-width: 95px;
}



.RadTabStrip.SFWKTabContainer_TabStrip {
    overflow: unset !important;
}

    .RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrow, .RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrowDisabled, .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrow, .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrowDisabled {
        background-repeat: no-repeat !important;
    }

    .RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrow {
        background-repeat: no-repeat !important;
    }

    .RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrowDisabled {
        background-repeat: no-repeat !important;
    }

    .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrow {
        background-repeat: no-repeat !important;
    }

    .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrowDisabled {
        background-repeat: no-repeat !important;
    }

#logo_cloee {
    background-image: url(../Images/logo_cloee.png);
    width: 152px;
    height: 68px;
    position: absolute;
    top: -50%;
    right: 10px;
    z-index: 10;
}

.cloee_ct_ligne_1 {
    padding-right: var(--space-8);
}

.loading-progress-container {
    background-color: var(--primary);
}


/* Annimation de chargement générique - remplace le vieux GIF progressBar */
#c2WaitPanelContainer {
    position: fixed;
    inset: 0;
    z-index: 10010;
}

#c2WaitPanelCadre {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 400px;
    min-height: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background-color: var(--secondary);
    border-radius: 15px;
    box-shadow: rgb(170, 170, 170) 1px 1px 30px;
    text-align: center;
}

#c2WaitPanelText {
    color: var(--text-color, #1f2d38);
    font-size: var(--font-md, 1rem);
    font-weight: 600;
}

#c2WaitPanelLoader {
    position: relative;
    width: 220px;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(51, 125, 179, 0.25);
}

    #c2WaitPanelLoader::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 40%;
        border-radius: inherit;
        background: linear-gradient( 90deg, transparent, rgba(51, 125, 179, 0.25), rgba(51, 125, 179, 0.9), rgba(51, 125, 179, 0.25), transparent );
        animation: c2WaitPanelLoaderSlide 1.15s infinite linear;
    }

@keyframes c2WaitPanelLoaderSlide {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(300%);
    }
}

.rlbButtonAreaRight {
    width: 24px !important;
}

.popup-container .popup-header {
    height: auto !important;
    min-height: 30px;
    line-height: normal !important;
    padding: var(--space-8) var(--space-40) var(--space-8) var(--space-12);
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

#divPopupFiltreOptions > table:last-of-type {
    width: 100%;
    margin-top: var(--space-12);
}

    #divPopupFiltreOptions > table:last-of-type tr {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-8);
    }

    #divPopupFiltreOptions > table:last-of-type td {
        display: block;
        width: auto !important;
        padding: 0 !important;
    }

#divPopupFiltreOptions .DateFilterTemplate_btnAnnulerFiltre,
#divPopupFiltreOptions .DateFilterTemplate_btnFiltrer {
    min-width: 110px;
}

.AideMessageForFiltreOption,
.AideMessageForFiltreOption ul,
.AideMessageForFiltreOption li {
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

    .AideMessageForFiltreOption ul {
        margin: 0;
        padding-left: 18px;
    }

    .AideMessageForFiltreOption li {
        line-height: 1.4;
    }

.border-space-8 {
    border-spacing: var(--space-8);
}

.border-space-16 {
    border-spacing: var(--space-16);
}

.top-space-16 {
    margin-top: var(--space-16);
}

.align-cell-in-row-middle td {
    vertical-align: middle !important;
}

.ger .validationsDossierRow > td {
    vertical-align: top;
    height: 1px;
}

    .ger .validationsDossierRow > td > fieldset.premierNiveau,
    .ger .validationsDossierRow > td > fieldset.secondNiveau {
        height: 100%;
        min-height: 100%;
        box-sizing: border-box;
    }

.Margin5 {
    margin-right: 5px;
}

.ger .statut-validation .rouge {
    color: var(--error);
}

.ger .statut-validation .vert {
    color: var(--success);
}

.ger .statut-validation .orange {
    color: var(--warning);
}

.ger .etat-dossier .incomplet {
    color: var(--error);
}
.ger .TextRightAlign{
    float:right;
    padding-right:var(--space-4);
}
/* ==========================================================================
   DOCUMENTATION GLOBALE
   Fichier : guTelerikOverwrite.css

   Ce fichier contient des surcharges Telerik historiques, notamment pour :
   - telerik:RadMenu : .RadMenu_Default / .rm*
   - telerik:RadWindow : .RadWindow_Default / .rw*
   - telerik:RadButton : .RadButton / .rb*
   - icônes Telerik et sprites legacy

   Remarque :
   Ce fichier complète ou surcharge ponctuellement les fichiers
   GraphicCharter/Components/*.css.
   ========================================================================== */
/* Surcharge Telerik historique pour le composant telerik:RadMenu */
div.RadMenu_Default .rmRootGroup {
    border: none;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background-repeat: repeat-x;
    background-position: 0 -408px;
    background-color: #e6e6e6;
}
/*****************************************************RadWindow****************************************/

/* Surcharge Telerik historique pour le composant telerik:RadWindow */
div.RadWindow_Default a.rwIcon {
    background-image: url(Images/window.png);
    background-position: 0 0;
}
/**********************************************Label in RadFormDecorator*****************************/
/*********************************************RadButton***********************************************/
/* Basic 16x16 */

/* Surcharge Telerik historique pour le composant telerik:RadButton et ses sprites d'icônes */
.RadButton .rbAdd, .RadButton .rbRemove, .RadButton .rbOk, .RadButton .rbCancel, .RadButton .rbPrevious, .RadButton .rbNext, .RadButton .rbSave, .RadButton .rbConfig, .RadButton .rbRefresh, .RadButton .rbEdit {
    background-image: url(Images/Button/rbBasicIcons16x16.png) !important;
}
/* Extended 16x16 */
.RadButton .rbUpload, .RadButton .rbDownload, .RadButton .rbOpen, .RadButton .rbAttach, .RadButton .rbPrint, .RadButton .rbSearch, .RadButton .rbHelp, .RadButton .rbCart, .RadButton .rbRSS, .RadButton .rbMail, .RadButton .rbFB, .RadButton .rbTwitter, .RadButton .rbPdf, .RadButton .rbNew, .RadButton .rbSend, .RadButton .rbServiceLink, .RadButton .rbCart, .RadButton .rbCartAdd, .RadButton .rbCartCheckout {
    background-image: url(Images/Button/rbExtendedIcons16x16.png) !important;
}
/* Basic 24x24 */
.RadButton .rbAdd24, .RadButton .rbRemove24, .RadButton .rbOk24, .RadButton .rbCancel24, .RadButton .rbPrevious24, .RadButton .rbNext24, .RadButton .rbSave24, .RadButton .rbConfig24, .RadButton .rbRefresh24, .RadButton .rbEdit24 {
    background-image: url(Images/Button/rbBasicIcons24x24.png) !important;
    width: 24px;
    height: 24px;
}
/* Extended 24x24 */
.RadButton .rbUpload24, .RadButton .rbDownload24, .RadButton .rbOpen24, .RadButton .rbAttach24, .RadButton .rbPrint24, .RadButton .rbSearch24, .RadButton .rbHelp24, .RadButton .rbCart24, .RadButton .rbRSS24, .RadButton .rbMail24, .RadButton .rbFB24, .RadButton .rbTwitter24, .RadButton .rbPdf24, .RadButton .rbNew24, .RadButton .rbSend24, .RadButton .rbServiceLink24, .RadButton .rbCart24, .RadButton .rbCartAdd24, .RadButton .rbCartCheckout24 {
    background-image: url(Images/Button/rbExtendedIcons24x24.png) !important;
    width: 24px;
    height: 24px;
}

.RadButton_Default .rbDecorated:hover {
    color: white !important;
}

.RadButton_Default .rbSkinnedButton:hover {
    color: white !important;
}

.rbPdf {
    background-position: -240px 0 !important;
}

.rbPdf24 {
    background-position: -360px 0 !important;
}

.rbNew {
    background-position: -260px 0 !important;
}

.rbNew24 {
    background-position: -390px 0 !important;
}

.rbSend {
    background-position: -280px 0 !important;
}

.rbSend24 {
    background-position: -420px 0 !important;
}

.rbServiceLink {
    background-position: -300px 0 !important;
}

.rbServiceLink24 {
    background-position: -450px 0 !important;
}

.RadButton .rbCart {
    background-position: -320px 0 !important;
}

.rbCart24 {
    background-position: -480px 0 !important;
}

.rbCartAdd {
    background-position: -340px 0 !important;
}

.rbCartAdd24 {
    background-position: -510px 0 !important;
}

.rbCartCheckout {
    background-position: -360px 0 !important;
}

.rbCartCheckout24 {
    background-position: -530px 0 !important;
}

.rbSkinnedButton {
    vertical-align: inherit !important;
}
/*********************************************RadMenuContext***********************************************/
.RadMenu_Context .rmLink {
    background-image: none !important;
}

.RadMenu .rmGroup.rmVertical .rmSeparator .rmText, .RadMenu .rmScrollWrap .rmVertical .rmSeparator .rmText {
    margin-left: 2px !important;
}

.RadMenu_Context .rbAdd .rmLeftImage, .RadMenu_Context .rbEdit .rmLeftImage, .RadMenu_Context .rbCancel .rmLeftImage, .RadMenu_Context .rbNext .rmLeftImage, .RadMenu_Context .rbPrevious .rmLeftImage, .RadMenu_Context .rbRefresh .rmLeftImage, .RadMenu_Context .rbRemove .rmLeftImage, .RadMenu_Context .rbSave .rmLeftImage {
    background-image: url(Images/Button/rbBasicIcons16x16.png);
    background-repeat: no-repeat !important;
}

.RadMenu_Context .rbDownload .rmLeftImage, .RadMenu_Context .rbHelp .rmLeftImage, .RadMenu_Context .rbOpen .rmLeftImage, .RadMenu_Context .rbPrint .rmLeftImage, .RadMenu_Context .rbSearch .rmLeftImage, .RadMenu_Context .rbUpload .rmLeftImage, .RadMenu_Context .rbPdf .rmLeftImage, .RadMenu_Context .rbNew .rmLeftImage, .RadMenu_Context .rbCartAdd .rmLeftImage, .RadMenu_Context .rbSend .rmLeftImage, .RadMenu_Context .rbServiceLink .rmLeftImage, .RadMenu_Context .rbMail .rmLeftImage {
    background-image: url(Images/Button/rbExtendedIcons16x16.png);
    background-repeat: no-repeat !important;
}

.rbAdd .rmLeftImage {
    background-position: 0 0;
}

.rbCancel .rmLeftImage {
    background-position: -60px 0;
}

.rbDownload .rmLeftImage {
    background-position: -20px 0;
}

.rbEdit .rmLeftImage {
    background-position: -180px 0;
}

.rbHelp .rmLeftImage {
    background-position: -120px 0;
}

.rbMail .rmLeftImage {
    background-position: -180px 0;
}

.rbNext .rmLeftImage {
    background-position: -100px 0;
}

.rbOpen .rmLeftImage {
    background-position: -40px 0;
}

.rbPrevious .rmLeftImage {
    background-position: -80px 0;
}

.rbPrint .rmLeftImage {
    background-position: -80px 0;
}

.rbRefresh .rmLeftImage {
    background-position: -160px 0;
}

.rbRemove .rmLeftImage {
    background-position: -20px 0;
}

.rbSave .rmLeftImage {
    background-position: -120px 0;
}

.rbSearch .rmLeftImage {
    background-position: -100px 0;
}

.rbUpload .rmLeftImage {
    background-position: 0 0;
}

.rbPdf .rmLeftImage {
    background-position: -240px 0;
}

.rbNew .rmLeftImage {
    background-position: -260px 0;
}

.rbCartAdd .rmLeftImage {
    background-position: -280px 0;
}

.rbSend .rmLeftImage {
    background-position: -300px 0;
}

.rbServiceLink .rmLeftImage {
    background-position: -320px 0;
}
/*******************************************TextBox in RadFormDecoratod ********************************************************/
.RadForm_Default.rfdTextbox input[type="text"].validation_error, .RadForm_Default.rfdTextbox input[type="password"].validation_error, .RadForm_Default.rfdTextbox textarea.validation_error {
    border: 1px solid var(--error);
}

.RadForm_Default.rfdTextbox input[type="text"].validation_error:hover, .RadForm_Default.rfdTextbox input[type="password"].validation_error:hover, .RadForm_Default.rfdTextbox textarea.validation_error:hover, .RadForm_Default.rfdTextbox input[type="text"].validation_error:focus, .RadForm_Default.rfdTextbox input[type="password"].validation_error:focus, .RadForm_Default.rfdTextbox textarea.validation_error:focus {
    border: 3px solid var(--error) !important;
}

html body .riSingle .riError[type="text"] {
    border-width: 2px !important;
    border-color: var(--error) !important;
    border-style: solid !important;
    color: Black !important;
}

.gu_formvalidator_error {
    color: var(--error);
}
/********************************************************RadGrid****************************************************/
.RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td, .RadGrid_Default .rgEditRow td, .RadGrid_Default .rgFooter td {
    border-width: 0px !important;
}

.RadGrid_Default .rgCommandCell {
    border: 0 !important;
}

.RadGrid_Default td.rgPagerCell {
    border-left: 0 !important;
}

div[id$="_Frozen"] {
    overflow: scroll !important;
}
/************************************************ Grilles - lignes d'une grille avec frozen columns *********************************************/
.RadGrid .rgFilterRow td {
    padding-bottom: var(--space-4) !important;
    vertical-align: middle;
}

.RadGrid .rgRow td, .RadGrid .rgAltRow td, .RadGrid .rgEditRow td, .RadGrid .rgFooter td {
    vertical-align: middle;
}

.RadGrid_Default .rgMasterTable .rgSelectedCell, .RadGrid_Default .rgSelectedRow {
    background: none !important;
}
/************************************************** Grille - Bouton export Excel ***********************************************************/
.RadGrid_Default .rgExpXLS {
    /* 🔥 On supprime totalement l’image HTML */
    content: none;
    background: none !important;
    /* On met ton icône */
    background-image: url(../Images/Controles/export-excel.png) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain;
    width: 18px !important;
    height: 18px !important;
    /* Reset natif */
    border: none;
    padding: 0;
}
/************************************************** RadTextBox *****************************************************************************/
.riError {
    background-image: none !important;
    color: Black !important;
}

html body .RadInput_Default .riDisabled, html body .RadInput_Disabled_Default {
    background: none repeat scroll 0 0 transparent !important;
    border-color: Gray !important;
}

html body .riSingle .riTextBox[type="text"] :not(.rgFilterBox) {
    height: 24px;
    line-height: 24px;
}


html body .RadInput_Default textarea.riTextBox {
    line-height: 24px;
    border: solid 1px #212f41;
}
/************************************************* Upload ****************************************************************************/
/* permet de cacher complètement un champ soit disant caché servant à la validation lors de l'upload multiple (bug IE) */
span[id$="_rtbFake_wrapper"] {
    display: none;
}

html body .RadUpload_Default .ruFakeInput {
    height: 18px;
    line-height: 18px;
    border: 1px solid #212f41;
}




.RadUpload .ruInputs li {
    margin: 0 0 var(--space-4) !important;
}

.RadUpload .ruActions .ruAdd {
    width: auto !important;
}

.RadUpload .ruRemove {
    padding-left: var(--space-8) !important;
}
/************************************************** AutoComplete ??? *****************************************************************************/
.RadComboBox_Default .rcbDisabled .rcbInputCell .rcbInput {
    color: Black !important;
}

.RadComboBox_Default .rcbDisabled .rcbInputCellLeft {
    background: none !important;
    background-color: transparent !important;
}

.RadComboBoxDropDown .rcbList {
    font-size: 13px;
}

span[gutype="GuComboBox"][disabled] div {
    border-color: Gray;
}

.RadComboBoxDropDown_Default .rcbHovered .ListItemInError, .RadComboBoxDropDown_Default .rcbItem .ListItemInError, .RadComboBox .RadComboBox_Default .notLoadOnDemand .ListItemInError {
    color: #ff1d1d !important;
}
/********************************************************** RadGerCalendar *************************************************************************/
.GerCalendar .rcRow .rcSelected {
    background: none !important;
    border: none;
}

.GerCalendar .rcRow th {
    height: 34px;
}

.GerCalendar .rcSelected td {
    height: 32px;
    width: 32px;
}
/********************************************************** RadTabStrip *****************************************************************************/
/******************************** Wizard *****************************/
.gu_wizard .RadTabStrip .rtsIn {
    padding: 0 !important;
}

.gu_wizard .RadTabStrip .rtsLevel1 .rtsTxt {
    padding: 0 !important;
}
/******************************** Onglet modules *********************/
.RadTabStrip.SFWKTabContainer_TabStrip .rtsLink, .RadTabStripVertical .rtsLink {
    padding-left: 0 !important;
}

.RadTabStrip.SFWKTabContainer_TabStrip .rtsLevel .rtsLink .rtsOut {
    padding: 0;
}

.RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrow, .RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrowDisabled, .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrow, .RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrowDisabled {
    background-position: 0 0 !important;
}

.RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrow {
    background-image: url("../Images/Controles/FlecheGauche.png") !important;
}

.RadTabStrip.SFWKTabContainer_TabStrip .rtsPrevArrowDisabled {
    background-image: url("../Images/Controles/FlecheGauche_disable.png") !important;
}

.RadTabStrip.SFWKTabContainer_TabStrip .rtsNextArrowDisabled {
    background-image: url("../Images/Controles/FlecheDroite_disable.png") !important;
}
/********************************************************** RadDateInput *****************************************************************************/
.RadCalendar_Default .rcMain .rcRow .rcSelected a {
    color: #333333 !important;
}
/********************************************************** RadListBox *****************************************************************************/
.RadListBox_Default .rlbGroup .rlbSelected {
    background: var(--component-header-selected-background) !important;
}

.RadListBox_Default .rlbGroup .rlbHovered {
    background-image: none !important;
    background-color: #dae2e8 !important;
    border-bottom-color: transparent !important;
}
/**************************************************************** RadPanel (pour lancement de liste, en tout cas) ***************************************************/


/* cadre gris pour délimiter les headers */
#content .rpFirst {
    border-top: 0;
}
/************************************************************Gros boutons / longs boutons **************************************************************************/
/* pour IE9... */
.BigButton.rbSkinnedButton.RadButton_Default.CegButton, .LongButton.rbSkinnedButton.RadButton_Default.CegButton, .BigButton.RadButton_Default.CegButton .rbDecorated, .LongButton.RadButton_Default.CegButton .rbDecorated {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#c9d3d8", endColorstr="#9fabbd",GradientType=0 );
}

.CegButton.RadButton_Default.rbSkinnedButton.BigButton, .CegButton.RadButton_Default.rbSkinnedButton.LongButton, .CegButton.RadButton_Default.BigButton .rbDecorated, .CegButton.RadButton_Default.LongButton .rbDecorated {
    border-radius: 10px;
    letter-spacing: -1px;
}

.CegButton.rbSkinnedButton.BigButton, .CegButton.rbSkinnedButton.LongButton {
    height: auto !important;
}
/* Pas d'effet "hover" sur les boutons disabled */
.CegButton.rbDisabled.BigButton .rbDecorated:hover, .CegButton.rbDisabled.LongButton .rbDecorated:hover {
    background-image: linear-gradient(#c9d3d8, #9fabbd) !important;
    color: white;
    border-radius: 10px;
    letter-spacing: -1px;
    font-weight: var(--font-weight-bold) !important;
    color: #fff !important;
    text-shadow: 1px 1px 0 #145982;
}

.CegButton.RadButton_Default.rbSkinnedButton.BigButton input {
    width: 300px !important;
    height: 60px !important;
    font-size: 24px !important;
}

/***************************************************************** Menu ****************************************************************************/
.RadMenu_Default .rmGroup, .RadMenu_Default .rmMultiColumn, .RadMenu_Default .rmGroup .rmVertical {
    border: 0px solid #979797;
    background: url("WebResource.axd?d=Ae5xibgil5wmCrKyA7s0XHA4jWPogKgZV-ryWYssadVADgd4svTyvpAF8xxq4wyTzaCPSugtMgSJV_IhAC9-TBQScAiVlIz1AL4iWUh5KbjAN06hvlK1rL5U6mYJ6s-LAfXqW87f9eYAhfsvOa3oyITdgaXxZY2DmoTMHhbuOf01&t=635563075638300361") repeat-y scroll 0px 0px #FFF;
    box-shadow: 1px 1px 12px #555;
}

.RadMenu_Default .rmTopFix, .RadMenu_Default .rmBottomFix, .RadMenu_Default .rmRoundedCorners .rmGroup .rmItem, .RadMenu_Default .rmRoundedCorners li.rmFirstGroupColumn .rmItem, .RadMenu_Default .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem, .RadMenu_Default .rmRoundedCorners ul.rmHorizontal .rmFirst, .RadMenu_Default_Context.rmRoundedCorners .rmGroup .rmItem, .RadMenu_Default_Context.rmRoundedCorners ul.rmHorizontal .rmFirst {
    background-image: none !important;
}

.RadMenu_Default .rmGroup {
    background-image: none !important;
}

.RadMenu_Default .rmRootGroup, .RadMenu_Default a.rmLink, .RadMenu_Default .rmGroup .rmText, .RadMenu_Default .rmVertical .rmText, .RadMenu_Default .rmLeftArrow, .RadMenu_Default .rmRightArrow, .RadMenu_Default .rmTopArrow, .RadMenu_Default .rmBottomArrow, .RadMenu_Default .rmIcon {
    background-image: none !important;
}

.rmText:hover {
    background-color: var(--component-header-hover-background) !important;
}

.RadMenu .rmGroup .rmText {
    padding: 0px var(--space-12) 0px var(--space-4) !important;
    margin: 0 !important;
}

.rmFirst.sousDomaineMenuItem {
    margin: var(--space-12) 0px 0px 0px !important;
}

.rmLast.sousDomaineMenuItem {
    margin: 0px 0px var(--space-12) 0px !important;
}

.RadMenu ul.rmGroup {
    padding: 0 !important;
}

/* ============================================================
   DOCUMENTATION COMPOSANT
   Fichier : Typography.css

   Documentation des r�gles typographiques globales et des
   composants cibl�s dans ce fichier.

   Composants / zones couverts dans ce fichier :
   - Base HTML de la zone .cloee2
   - Paragraphes natifs HTML : p
   - Titres natifs HTML : h1 � h6
   - Boutons framework SFWK : .SFWK_Button, .SFWK_ButtonColored
   - Pages d'�dition SFWK : .SFWKEditPage
   - Barres d'action SFWK : .SFWKActionBar_*
   - Onglets Telerik RadTabStrip : .RadTabStrip_Default
   - Upload Telerik RadUpload : .RadUpload / .ruButton
   - Listes d�roulantes Telerik RadComboBox : .RadComboBox*
   - Tooltips / aides contextuelles : .ToolTip*
   - Wizards / tabs legacy : .gu_wizard_*, .gu_tabs_*
   - Fieldset / legend HTML natifs
   - Boutons m�tiers / boutons legacy : .cegUplButton,
     .OptionGrid_undobutton, .btnCommentaire, .BoutonAvant,
     .BoutonApres, etc.
   - Navigation gauche : .leftNavigationMenuItem
   - MultiSelectionList : zone de filtre texte

   Remarque :
   Ce fichier centralise surtout la hi�rarchie typographique
   (tailles, line-height, emphase) et quelques ajustements cibl�s
   sur des composants Telerik / SFWK / legacy.
   ============================================================ */
.ger {
    font-family: var(--font-family);
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
    color: var(--body-content);
}
.ger p {
    margin: 0 0 var(--space-8) 0;
}
.ger h1, .ger h2, .ger h3, .ger h4, .ger h5, .ger h6 {
    margin: var(--space-12) 0 var(--space-8) 0;
    font-family: var(--font-family);
    font-weight: bold;
    color: var(--title);
}
.ger h1 {
    font-size: var(--font-xxl);
    line-height: var(--line-height-heading);
}
.ger h2 {
    font-size: var(--font-xl);
    line-height: var(--line-height-heading);
}
.ger h3 {
    font-size: var(--font-lg);
    line-height: var(--line-height-heading);
}
.ger h4 {
    font-size: var(--font-md);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);
}
.ger h5 {
    font-size: var(--font-sm);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);
}
.ger h6 {
    font-size: var(--font-xs);
    line-height: var(--line-height-heading);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ger .SFWK_Button {
    font-size: var(--font-sm);
}
.ger .SFWK_ButtonColored {
    font-size: var(--font-sm);
}
.ger .SFWKEditPage td {
    font-size: var(--font-sm);
}
.ger .SFWKActionBar_Title {
    font-size: var(--font-sm);
}
.ger .SFWKActionBar_ddlSubAction {
    font-size: var(--font-sm);
}
.ger .SFWKTabContainer_TabStrip.RadTabStrip_Default .rtsLI, .ger .SFWKTabContainer_TabStrip.RadTabStrip_Default .rtsLink {
    font-size: var(--font-sm);
}
.ger .RadUpload .ruBrowse .ruButton, .ger html body .RadUpload_Default .ruButton {
    font-size: var(--font-sm);
}
.ger .RadComboBoxDropDown {
    font-size: var(--font-xs);
}
.ger .RadComboBoxDropDown .rcbList {
    font-size: var(--font-xs);
}
.ger #inner {
    font-size: var(--font-xs);
}
.ger .ToolTipContainer {
    font-size: var(--font-xs);
}
.ger .ToolTipTitle {
    font-size: var(--font-xs);
}
.ger .gu_wizard_tab_step {
    font-size: var(--font-xs);
}
.ger .gu_wizard_tab_step_selected {
    font-size: var(--font-xs);
}
.ger .gu_tabs_tab {
    font-size: var(--font-xs);
}
.ger .gu_tabs_selected_tab {
    font-size: var(--font-xs);
}
.ger fieldset.premierNiveau legend {
    font-size: var(--font-lg);
}
.ger fieldset.secondNiveau legend {
    font-size: var(--font-sm);
}
.ger .Repeater fieldset legend {
    font-size: var(--font-sm);
}
.ger .cegUplButton {
    font-size: var(--font-sm);
}
.ger .leftNavigationMenuItem {
    font-size: var(--font-xs);
}
.ger .leftNavigationMenuItem > a {
    font-size: var(--font-md);
}
.ger .OptionGrid_undobutton {
    font-size: var(--font-sm);
}
.ger .MultiSelectionList_TextBoxFiltre > span:first-child > input:first-child {
    font-size: var(--font-xs);
}
.ger .btnCommentaire {
    font-size: var(--font-sm);
}
.ger .btnCommentaireSansNote {
    font-size: var(--font-sm);
}
/* =====================================================================================================================
   icones.css
   Centralisation des icônes Font Awesome et des utilitaires d’icônes pour CLOEE2
   Version modernisée / harmonisée hover + actions
===================================================================================================================== */

.ger {
    /* ================================================================================================================
       CONFIG GLOBALE FONT AWESOME
    ================================================================================================================ */

    --icon-family-solid: "Font Awesome 7 Free";
    --icon-family-regular: "Font Awesome 7 Free";
    --icon-family-brands: "Font Awesome 7 Brands";
    --icon-weight-solid: 900;
    --icon-weight-regular: 400;
    --icon-color: var(--primary);
    /* Hover / Active */
    --icon-action-hover-color: color-mix(in srgb, var(--primary) 88%, black 12%);
    --icon-action-hover-bg: color-mix(in srgb, var(--primary) 14%, transparent);
    --icon-action-hover-border: color-mix(in srgb, var(--primary) 45%, transparent);
    --icon-action-active-bg: color-mix(in srgb, var(--primary) 22%, transparent);
    /* ================================================================================================================
       MAPPING DES ICÔNES
    ================================================================================================================ */
    /* Général */
    --icon-info: "\f05a";
    --info-alert: "\f071";
    --icon-error: "\f00d";
    --icon-success: "\f00c";
    --icon-help: "\f059";
    --icon-search: "\f002";
    /* Actions */
    --icon-add: "\2b";
    --icon-edit: "\f044";
    --icon-delete: "\f1f8";
    --icon-save: "\f0c7";
    --icon-select: "\f14a";
    --icon-unselect: "\f146";
    /* Navigation */
    --icon-left: "\f053";
    --icon-right: "\f054";
    --icon-up: "\f062";
    --icon-down: "\f063";
    --icon-menu: "\f0c9";
    --icon-move: "\f047";
    --icon-arrow-left: "\f060";
    --icon-arrow-right: "\f061";
    --icon-angles-left: "\f100";
    --icon-angles-right: "\f101";
    /* Fichiers */
    --icon-file: "\f15b";
    --icon-file-excel: "\f1c3";
    --icon-file-pdf: "\f1c1";
    /* États */
    --icon-check-circle: "\f058";
    --icon-xmark-circle: "\f057";
    /* Calendrier */
    --icon-calendar-days: "\f073";
    --icon-alarm-clock: "\f34e";
}

    /* =====================================================================================================================
   BASE FONT AWESOME
===================================================================================================================== */

    .ger .fa,
    .ger .fa-brands,
    .ger .fa-classic,
    .ger .fa-regular,
    .ger .fa-solid,
    .ger .fab,
    .ger .far,
    .ger .fas {
        color: var(--icon-color) !important;
        line-height: 1;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        vertical-align: middle;
    }

    .ger a.fa,
    .ger a.fa-brands,
    .ger a.fa-classic,
    .ger a.fa-regular,
    .ger a.fa-solid,
    .ger a.fab,
    .ger a.far,
    .ger a.fas {
        text-decoration: none;
    }

    /* =====================================================================================================================
   BASE GÉNÉRIQUE DES ICÔNES
===================================================================================================================== */

    .ger .icon-sm,
    .ger .icon,
    .ger .icon-lg,
    .ger .icon-xl,
    .ger .icon-action-sm,
    .ger .icon-action,
    .ger .icon-action-lg,
    .ger .icon-action-xl {
        display: inline-flex;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        align-content: center !important;
        line-height: 1;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    /* Icônes simples */

    .ger .icon-sm,
    .ger .icon,
    .ger .icon-lg,
    .ger .icon-xl {
        cursor: inherit;
        padding: 2px;
    }

    /* Icônes actions */

    .ger .icon-action-sm,
    .ger .icon-action,
    .ger .icon-action-lg,
    .ger .icon-action-xl {
        border-radius: var(--radius-sm);
        transition: background-color .15s ease, box-shadow .20s ease, color .15s ease, transform .12s ease;
        cursor: pointer;
        padding: 0;
    }

    /* =====================================================================================================================
   TAILLES – ICÔNES
===================================================================================================================== */

    .ger .icon-sm {
        width: var(--icon-box-sm) !important;
        height: var(--icon-box-sm) !important;
        font-size: var(--icon-sm-size) !important;
    }

    .ger .icon {
        width: var(--icon-box-md) !important;
        height: var(--icon-box-md) !important;
        font-size: var(--icon-md-size) !important;
    }

    .ger .icon-lg {
        width: var(--icon-box-lg) !important;
        height: var(--icon-box-lg) !important;
        font-size: var(--icon-lg-size) !important;
    }

    .ger .icon-xl {
        width: var(--icon-box-xl) !important;
        height: var(--icon-box-xl) !important;
        font-size: var(--icon-xl-size) !important;
    }

    /* =====================================================================================================================
   TAILLES – ACTIONS
===================================================================================================================== */

    .ger .icon-action-sm {
        width: var(--icon-action-box-sm) !important;
        height: var(--icon-action-box-sm) !important;
        font-size: var(--icon-sm-size) !important;
    }

    .ger .icon-action {
        width: var(--icon-action-box-md) !important;
        height: var(--icon-action-box-md) !important;
        font-size: var(--icon-md-size) !important;
    }

    .ger .icon-action-lg {
        width: var(--icon-action-box-lg) !important;
        height: var(--icon-action-box-lg) !important;
        font-size: var(--icon-lg-size) !important;
    }

    .ger .icon-action-xl {
        width: var(--icon-action-box-xl) !important;
        height: var(--icon-action-box-xl) !important;
        font-size: var(--icon-xl-size) !important;
    }

    /* =====================================================================================================================
   SUPPORT HTML
===================================================================================================================== */

    .ger a.icon-sm,
    .ger a.icon,
    .ger a.icon-lg,
    .ger a.icon-xl,
    .ger a.icon-action-sm,
    .ger a.icon-action,
    .ger a.icon-action-lg,
    .ger a.icon-action-xl,
    .ger button.icon-sm,
    .ger button.icon,
    .ger button.icon-lg,
    .ger button.icon-xl,
    .ger button.icon-action-sm,
    .ger button.icon-action,
    .ger button.icon-action-lg,
    .ger button.icon-action-xl {
        text-decoration: none;
    }

    /* =====================================================================================================================
   ÉTATS INTERACTIFS
===================================================================================================================== */

    .ger .icon-action-sm:not(.aspNetDisabled):hover,
    .ger .icon-action:not(.aspNetDisabled):hover,
    .ger .icon-action-lg:not(.aspNetDisabled):hover,
    .ger .icon-action-xl:not(.aspNetDisabled):hover {
        background-color: var(--icon-action-hover-bg) !important;
        box-shadow: 0 0 0 1px var(--icon-action-hover-border) !important;
        color: var(--icon-action-hover-color) !important;
        filter: none !important;
        text-decoration: none !important;
    }

        .ger .icon-action-sm:not(.aspNetDisabled):hover::before,
        .ger .icon-action:not(.aspNetDisabled):hover::before,
        .ger .icon-action-lg:not(.aspNetDisabled):hover::before,
        .ger .icon-action-xl:not(.aspNetDisabled):hover::before {
            color: var(--icon-action-hover-color) !important;
        }

    .ger .icon-action-sm:not(.aspNetDisabled):active,
    .ger .icon-action:not(.aspNetDisabled):active,
    .ger .icon-action-lg:not(.aspNetDisabled):active,
    .ger .icon-action-xl:not(.aspNetDisabled):active {
        background-color: var(--icon-action-active-bg) !important;
        box-shadow: 0 0 0 1px var(--icon-action-hover-border) !important;
        transform: translateY(1px);
        text-decoration: none !important;
    }

    .ger .icon-action-sm:not(.aspNetDisabled):focus-visible,
    .ger .icon-action:not(.aspNetDisabled):focus-visible,
    .ger .icon-action-lg:not(.aspNetDisabled):focus-visible,
    .ger .icon-action-xl:not(.aspNetDisabled):focus-visible {
        outline: none !important;
        box-shadow: var(--focus-ring) !important;
        background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
    }

/* =====================================================================================================================
   RADBUTTON ICON-ONLY FONT AWESOME
   Cas Telerik : l’icône est portée directement par le <span class="RadButton fa-solid fa-... icon-action">.
   Le style bouton force font-family: var(--font-family), donc on rétablit Font Awesome ici.
===================================================================================================================== */

.ger .RadButton.fa-solid:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl),
.ger .RadButton.fas:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl) {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    min-width: 0 !important;
    font-family: var(--icon-family-solid) !important;
    font-weight: var(--icon-weight-solid) !important;
    color: var(--icon-color) !important;
}

.ger .RadButton.fa-solid:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl)::before,
.ger .RadButton.fas:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl)::before {
    font-family: var(--icon-family-solid) !important;
    font-weight: var(--icon-weight-solid) !important;
    line-height: 1 !important;
    text-indent: 0 !important;
    z-index: 1;
}

.ger .RadButton.fa-solid:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl) > input.rbDecorated,
.ger .RadButton.fas:is(.icon-action-sm, .icon-action, .icon-action-lg, .icon-action-xl) > input.rbDecorated {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
}

/* =====================================================================================================================
   RADPICKER
===================================================================================================================== */

.RadPicker .rcCalPopup,
.RadPicker .rcTimePopup {
    background: none !important;
    background-image: none !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0;
    position: relative;
    overflow: hidden;
    text-indent: -9999px;
    margin-left: var(--space-8);
}

    .RadPicker .rcCalPopup::before,
    .RadPicker .rcTimePopup::before {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--icon-family-solid);
        font-weight: var(--icon-weight-solid);
        color: var(--primary);
        text-indent: 0;
        transition: opacity .2s ease, color .15s ease, transform .15s ease;
    }

    .RadPicker .rcCalPopup::before {
        content: var(--icon-calendar-days);
        font-size: 16px;
    }

    .RadPicker .rcTimePopup::before {
        content: var(--icon-alarm-clock);
        font-size: 17px;
    }

    .RadPicker .rcCalPopup:not(.rcDisabled):hover::before,
    .RadPicker .rcTimePopup:not(.rcDisabled):hover::before {
        color: var(--icon-action-hover-color);
        opacity: .95;
    }

/* =====================================================================================================================
   RADLISTBOX
===================================================================================================================== */

.ger .rlbButton.rlbNoButtonText {
    position: relative;
    width: var(--icon-action-box-md) !important;
    height: var(--icon-action-box-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: var(--space-2) 0 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--tertiary) !important;
    box-shadow: var(--shadow-1) !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .20s ease, transform .12s ease;
}

    .ger .rlbButton.rlbNoButtonText span {
        background: none !important;
        border: 0 !important;
    }

    .ger .rlbButton.rlbNoButtonText::before {
        font-family: var(--icon-family-solid);
        font-weight: var(--icon-weight-solid);
        font-size: var(--font-xs);
        color: var(--primary);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.ger .rlbTransferFrom::before,
.ger .rlbTransferFromDisabled::before {
    content: var(--icon-arrow-right);
}

.ger .rlbTransferTo::before,
.ger .rlbTransferToDisabled::before {
    content: var(--icon-arrow-left);
}

.ger .rlbTransferAllFrom::before {
    content: var(--icon-angles-right);
}

.ger .rlbTransferAllTo::before,
.ger .rlbTransferAllToDisabled::before {
    content: var(--icon-angles-left);
}

.ger .rlbButton.rlbNoButtonText:not(.rlbDisabled):hover {
    background-color: var(--icon-action-hover-bg) !important;
    border-color: var(--icon-action-hover-border) !important;
    box-shadow: 0 0 0 1px var(--icon-action-hover-border) !important;
}

    .ger .rlbButton.rlbNoButtonText:not(.rlbDisabled):hover::before {
        color: var(--icon-action-hover-color) !important;
    }

.ger .rlbButton.rlbDisabled {
    background: var(--disabled-b) !important;
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.ger .rlbButton.rlbDisabled::before {
    color: var(--disabled-text) !important;
    opacity: var(--disabled-icon-opacity);
}
/* Règle d'espace spécifique pour les icones [email] du control [MailToReadOnly] et [MailReadOnlyColumn] de la library CEG */
.mail-readonly-link {
    margin-right: var(--space-4);
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/InputFile.css

   Ce fichier contient principalement les règles CSS pour :
   - input natif HTML de type fichier : <input type="file">
   - asp:FileUpload : rendu HTML <input type="file">

   Astuce :
   Rechercher input[type="file"].
   ========================================================================== */
.ger {
    --upload-min-height: calc((var(--space-8) + var(--space-8)) + 1em);
    --upload-gap: var(--space-8);
    --upload-button-width: 120px;
}

.ger .RadUpload .ruFileWrap {
    height: var(--control-height) !important;
}

.ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileWrap {
    display: inline-flex;
    align-items: stretch;
    gap: var(--upload-gap);
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: var(--upload-min-height);
    box-sizing: border-box;
    position: relative !important;
    overflow: visible !important;
    vertical-align: top;
    cursor: pointer;
}

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileInput {
        position: absolute !important;
        inset: 0 !important;
        opacity: 0 !important;
        width: 100% !important;
        height: 100% !important;
        cursor: pointer !important;
        z-index: 3 !important;
    }

        .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileInput:disabled {
            opacity: 0 !important;
            font-size: 0 !important;
            color: transparent !important;
            cursor: not-allowed !important;
        }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFakeInput {
        flex: 1 1 auto;
        min-width: 0;
        width: 100% !important;
        font-family: var(--font-family) !important;
        font-size: var(--font-size) !important;
        line-height: var(--line-height) !important;
        background: var(--input-bg) !important;
        color: var(--input-text) !important;
        border: 1px solid var(--input-border) !important;
        border-radius: var(--radius-sm) !important;
        padding: var(--space-4) var(--space-8) !important;
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        box-sizing: border-box !important;
        outline: none !important;
        align-self: stretch !important;
        background-image: none !important;
        caret-color: transparent !important;
        user-select: none !important;
        cursor: pointer !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruButton.ruBrowse {
        font-family: var(--font-family) !important;
        font-size: var(--font-sm) !important;
        line-height: var(--line-height) !important;
        font-weight: normal !important;
        padding: var(--space-4) var(--space-16) !important;
        border-radius: var(--radius-sm) !important;
        border: 1px solid var(--border-color) !important;
        background: var(--tertiary) !important;
        color: var(--body-content) !important;
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: var(--upload-button-width) !important;
        flex: 0 0 auto !important;
        box-shadow: var(--shadow-1) !important;
        transition: background .09s ease, box-shadow .09s ease, opacity .09s ease, border-color .09s ease, color .09s ease !important;
        background-image: none !important;
        cursor: pointer !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

        .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruButton.ruBrowse:disabled {
            display: inline-flex !important;
            opacity: .55 !important;
            cursor: not-allowed !important;
        }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileWrap:hover .ruFakeInput {
        border-color: color-mix(in srgb, var(--input-border) 70%, black 30%) !important;
    }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileWrap:hover .ruButton.ruBrowse {
        background: var(--component-header-hover-background) !important;
        border-color: var(--component-header-hover-background) !important;
        color: var(--component-header-selected-color) !important;
        box-shadow: var(--shadow-2) !important;
    }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruFileWrap:focus-within .ruFakeInput {
        box-shadow: var(--focus-ring) !important;
    }

    .ger input[type="file"] {
        cursor: pointer;
    }

        .ger input[type="file"]::file-selector-button {
            font-family: var(--font-family);
            font-size: var(--font-sm);
            line-height: var(--line-height-normal);
            font-weight: normal;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border-color);
            background: var(--tertiary);
            color: var(--body-content);
            padding: var(--space-4) var(--space-16);
            height: var(--upload-min-height);
            box-sizing: border-box;
            cursor: pointer;
            box-shadow: var(--shadow-1);
            transition: background .09s ease, box-shadow .09s ease, border-color .09s ease, color .09s ease;
        }

        .ger input[type="file"]:hover::file-selector-button {
            background: var(--component-header-hover-background);
            border-color: var(--component-header-hover-background);
            color: var(--component-header-selected-color);
            box-shadow: var(--shadow-2);
        }

        .ger input[type="file"]:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

    .cloee2
    :is(.RadUpload, [class^="RadUpload_"], [class*=" RadUpload_"]):not([disabled]):not([disabled="disabled"])
    .ruFileWrap:hover
    .ruFakeInput {
        border-color: var(--primary) !important;
        box-shadow: var(--focus-ring) !important;
    }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruInputs > li:not(.ruActions) {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--space-4);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

        .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruInputs > li:not(.ruActions) > .ruButton.ruRemove {
            flex: 0 0 auto;
            margin: 0;
        }

    .ger :is(.RadUpload,[class^="RadUpload_"],[class*=" RadUpload_"]) .ruButton {
        margin: 0;
    }

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Button.css

   Ce fichier centralise principalement les règles CSS pour :
   - button natif HTML : <button>
   - asp:Button : rendu HTML <input type="submit"> / <input type="button">
   - ceg:button / CegButton : classes .CegButton
   - telerik:RadButton : classes .RadButton / .rb*
   - bouton utilitaire custom : .c2-button
   - ancien bouton framework : .SFWK_Button (sur certaines variantes / états)

   Astuce :
   Rechercher dans ce fichier les sélecteurs suivants pour retrouver rapidement
   la zone ciblée :
   .RadButton / .CegButton / input[type="submit"] / input[type="button"] / button / .c2-button
   ========================================================================== */
/* Règles CSS pour les boutons HTML natifs, asp:Button, ceg:button et telerik:RadButton */
.ger input[type="submit"]:not(.BoutonAvant):not(.BoutonApres):not(.hidden):not(.rbDecorated):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.rgSortDesc):not(.rgSortAsc):not(.rgExpXLS):not(.rgExpand):not(.rgCollapse), .ger input[type="button"]:not(.rbDecorated):not(.periode), .ger button, .ger .c2-button, .ger a.c2-button, .ger .RadButton, .ger .CegButton {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    height: var(--control-height);
    line-height: var(--line-height-normal);
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color) !important;
    background: var(--tertiary);
    color: var(--body-content);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    box-shadow: var(--shadow-1);
    transition: background .09s ease, box-shadow .09s ease, opacity .09s ease, border-color .09s ease, color .09s ease;
    text-decoration: none !important;
}

.ger .RadButton, .ger .CegButton {
    padding: var(--button-padding-y) var(--button-padding-x);
}

    .ger .RadButton.rbPrimary, .ger .CegButton.rbPrimary {
        border-color: var(--primary);
        background: var(--primary);
        color: var(--primary-contrast);
    }

.ger .c2-button--secondary {
    background: var(--secondary);
    color: var(--body-content);
    border-color: var(--border-color);
}

.ger .c2-button--danger {
    background: var(--error);
    border-color: var(--error);
    color: var(--input-bg);
}

.ger input[type="submit"]:not(:disabled):not(.aspNetDisabled):not(.BoutonAvant):not(.BoutonApres):not(.rgExpXLS):not(.rbDecorated):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.rgSortAsc):not(.rgSortDesc):not(.rgExpand):not(.rgCollapse):not(.Devalidation):not(.Validation):not(.button-periode):hover,
.ger input[type="button"]:not(:disabled):not(.aspNetDisabled):not(.BoutonAvant):not(.BoutonApres):not(.rbDecorated):not(.Devalidation):not(.Validation):not(.periode):hover,
.ger button:not(:disabled):hover,
.ger .c2-button:not(:disabled):hover,
.ger a.c2-button:not(.aspNetDisabled):hover,
.ger .RadButton:not(.rbDisabled):hover,
.ger .CegButton:not(.rbDisabled):not([disabled]):hover,
.ger .RadButton.rbSkinnedButton:not(.rbDisabled):hover,
.ger .c2-button--secondary:not(:disabled):hover,
.ger input[type="submit"].SFWK_Button:not(.rgExpXLS):not(.BoutonAvant):not(.BoutonApres):not(:disabled):not(.SFWK_ButtonDisabled):not(.Devalidation):not(.Validation):not(.rgExpXLS ):hover,
.ger input[type="button"].SFWK_Button:not(:disabled):not(.BoutonAvant):not(.BoutonApres):not(.SFWK_ButtonDisabled):not(.rgExpand):not(.rgCollapse):not(.Devalidation):not(.Validation):hover {
    background: var(--component-header-hover-background) !important;
}

.ger input[type="submit"]:not(:disabled):not(.rgExpXLS):not(.aspNetDisabled):not(.rbDecorated):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):not(.rgSortAsc):not(.rgSortDesc):not(.rgExpand):not(.rgCollapse):not(.Devalidation):not(.Validation):hover,
.ger input[type="button"]:not(:disabled):not(.aspNetDisabled):not(.rbDecorated):not(.Devalidation):not(.Validation):not(.periode):hover,
.ger button:not(:disabled):hover,
.ger .c2-button:not(:disabled):hover,
.ger a.c2-button:not(.aspNetDisabled):hover,
.ger .RadButton:not(.rbDisabled):hover,
.ger .CegButton:not(.rbDisabled):not([disabled]):hover,
.ger .RadButton.rbSkinnedButton:not(.rbDisabled):hover,
.ger .c2-button--secondary:not(:disabled):hover,
.ger input[type="submit"].SFWK_Button:not(.rgExpXLS):not(:disabled):not(.SFWK_ButtonDisabled):not(.Devalidation):not(.Validation):hover,
.ger input[type="button"].SFWK_Button:not(:disabled):not(.SFWK_ButtonDisabled):not(.rgExpand):not(.rgCollapse):not(.Devalidation):not(.Validation):hover {
    border-color: var(--component-header-hover-background) !important;
    color: var(--component-header-selected-color) !important;
    box-shadow: var(--shadow-2) !important;
}

.ger .c2-button--danger:not(:disabled):hover {
    color: var(--input-bg);
}

.ger .RadButton.rbPrimary:not(.rbDisabled):active, .ger .CegButton.rbPrimary:not(.rbDisabled):active {
    background: color-mix(in srgb, var(--primary) 60%, black 40%);
    box-shadow: var(--shadow-1);
}

.ger input[type="submit"]:disabled:not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast), .ger input[type="button"]:disabled:not(.periode), .ger button:disabled, .ger .c2-button:disabled, .ger a.c2-button:disabled, .ger .RadButton.rbDisabled, .ger .CegButton[disabled], .ger .aspNetDisabled:not(.SFWK_SubAction_ButtonDisabled):not(div) {
    cursor: default;
    box-shadow: none;
    color: var(--body-secondary-content);
    border-color: var(--border-color);
    pointer-events: none;
}

.ger .ger input[type="submit"]:not(.rbDecorated):not(.rgPageFirst):not(.rgPagePrev):not(.rgPageNext):not(.rgPageLast):focus-visible, .ger input[type="button"]:not(.rbDecorated):not(.periode):focus-visible, .ger button:focus-visible, .ger .c2-button:focus-visible, .ger a.c2-button:focus-visible, .ger .RadButton:focus-visible, .ger .CegButton:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

.ger .RadGrid_Default .rgPageFirst, .ger .RadGrid_Default .rgPagePrev, .ger .RadGrid_Default .rgPageNext, .ger .RadGrid_Default .rgPageLast {
    width: var(--control-height);
    height: var(--control-height);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--tertiary);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    cursor: pointer;
    padding: 0;
    margin: 0 var(--space-2);
    box-shadow: var(--shadow-1);
}

    .ger .RadGrid_Default .rgPageFirst:hover, .ger .RadGrid_Default .rgPagePrev:hover, .ger .RadGrid_Default .rgPageNext:hover, .ger .RadGrid_Default .rgPageLast:hover {
        background-position: center center;
    }

.ger .RadGrid_Default .rgPagePrev {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232e2e2e' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 18l-7-6 7-6v12z'/></svg>");
}

.ger .RadGrid_Default .rgPageNext {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232e2e2e' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 6l7 6-7 6V6z'/></svg>");
}

.ger .RadGrid_Default .rgPageFirst {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232e2e2e' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 18l-5-6 5-6v12zM18 18l-5-6 5-6v12z'/></svg>");
}

.ger .RadGrid_Default .rgPageLast {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%232e2e2e' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.5 6l5 6-5 6V6zM6 6l5 6-5 6V6z'/></svg>");
}

    .ger .RadGrid_Default .rgPageFirst:not(.rgDisabled):hover, .ger .RadGrid_Default .rgPagePrev:not(.rgDisabled):hover, .ger .RadGrid_Default .rgPageNext:not(.rgDisabled):hover, .ger .RadGrid_Default .rgPageLast:not(.rgDisabled):hover {
        background-color: var(--component-header-hover-background);
        border-color: var(--component-header-hover-background);
        color: var(--component-header-selected-color);
        box-shadow: var(--shadow-2);
    }

.ger .RadGrid_Default .rgPagePrev:not(.rgDisabled):hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 18l-7-6 7-6v12z'/></svg>");
}

.ger .RadGrid_Default .rgPageNext:not(.rgDisabled):hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.5 6l7 6-7 6V6z'/></svg>");
}

.ger .RadGrid_Default .rgPageFirst:not(.rgDisabled):hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13.5 18l-5-6 5-6v12zM18 18l-5-6 5-6v12z'/></svg>");
}

.ger .RadGrid_Default .rgPageLast:not(.rgDisabled):hover {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.5 6l5 6-5 6V6zM6 6l5 6-5 6V6z'/></svg>");
}

.ger .RadGrid_Default .rgDisabled, .ger .RadGrid_Default .rgDisabled:hover {
    background-color: var(--component-header-hover-background);
    border-color: var(--border-color);
    color: var(--component-header-selected-color);
    box-shadow: var(--shadow-2);
    opacity: 0.5;
    cursor: default;
}

.ger .RadGrid_Default .rgNumPart a, .ger .RadGrid_Default .rgNumPart a:hover, .ger .RadGrid_Default .rgNumPart a.rgCurrentPage, .ger .RadGrid_Default .rgNumPart a span, .ger .RadGrid_Default .rgNumPart a:hover span, .ger .RadGrid_Default .rgNumPart a.rgCurrentPage span {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ger .RadGrid_Default .rgNumPart {
    display: inline-flex;
    align-items: center;
}

    .ger .RadGrid_Default .rgNumPart a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: var(--control-height);
        margin: 0 var(--space-2) !important;
        padding: 0 var(--space-8);
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        color: var(--body-content);
        text-decoration: none !important;
        box-sizing: border-box;
    }

        .ger .RadGrid_Default .rgNumPart a span {
            display: inline-block;
        }

        .ger .RadGrid_Default .rgNumPart a.rgCurrentPage {
            border: 1px solid var(--primary) !important;
            background-color: transparent !important;
            color: var(--primary) !important;
            font-weight: var(--font-weight-semibold);
        }

        .ger .RadGrid_Default .rgNumPart a:not(.rgCurrentPage):hover {
            background: var(--component-header-hover-background) !important;
            border-color: var(--component-header-hover-background) !important;
            color: var(--component-header-selected-color) !important;
            box-shadow: var(--shadow-2) !important;
        }

.ger .RadButton.CegButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-height);
    padding: var(--space-4) var(--space-16) !important;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--tertiary);
    box-shadow: var(--shadow-1);
    font-family: var(--font-family) !important;
    line-height: var(--line-height) !important;
    color: var(--body-content);
    gap: var(--space-8);
}

.ger .CegButton.RadButton_Default.rbSkinnedButton.LongButton, .ger .CegButton.RadButton_Default.rbSkinnedButton.BigButton, .ger .BigButton.rbSkinnedButton.RadButton_Default.CegButton, .ger .LongButton.rbSkinnedButton.RadButton_Default.CegButton, .ger .CegButton.LongButton, .ger .CegButton.BigButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-8) !important;
    padding: var(--space-4) var(--space-16) !important;
    background: var(--tertiary) !important;
    background-image: none !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-1) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size) !important;
    line-height: var(--line-height) !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    color: var(--body-content) !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
}

    .ger .CegButton.RadButton_Default.rbSkinnedButton.LongButton .rbDecorated, .ger .CegButton.RadButton_Default.rbSkinnedButton.BigButton .rbDecorated, .ger .BigButton.rbSkinnedButton.RadButton_Default.CegButton .rbDecorated, .ger .LongButton.rbSkinnedButton.RadButton_Default.CegButton .rbDecorated, .ger .CegButton.LongButton .rbDecorated, .ger .CegButton.BigButton .rbDecorated {
        background: transparent !important;
        background-image: none !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        font: inherit !important;
        font-size: var(--font-sm) !important;
        text-shadow: none !important;
        color: inherit !important;
    }

    .ger .CegButton.RadButton_Default.rbSkinnedButton.LongButton:not(.rbDisabled):hover, .ger .CegButton.RadButton_Default.rbSkinnedButton.BigButton:not(.rbDisabled):hover, .ger .BigButton.rbSkinnedButton.RadButton_Default.CegButton:not(.rbDisabled):hover, .ger .LongButton.rbSkinnedButton.RadButton_Default.CegButton:not(.rbDisabled):hover {
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        background: var(--component-header-hover-background) !important;
        background-image: none !important;
        border-color: var(--component-header-hover-background) !important;
        color: var(--component-header-selected-color) !important;
        box-shadow: var(--shadow-2) !important;
    }

.ger .CegButton.LongButton, .ger .CegButton.BigButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-16) !important;
    background: var(--tertiary) !important;
    background-image: none !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-1) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-sm) !important;
    line-height: var(--line-height) !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    color: var(--body-content) !important;
}

    .ger .CegButton.LongButton:hover, .ger .CegButton.BigButton:hover {
        height: var(--control-height) !important;
        min-height: var(--control-height) !important;
        background: var(--component-header-hover-background) !important;
        background-image: none !important;
        border-color: var(--component-header-hover-background) !important;
        color: var(--component-header-selected-color) !important;
        box-shadow: var(--shadow-2) !important;
    }

    .ger .RadButton.CegButton.rbSkinnedButton:not(.rbDisabled):hover > input.rbDecorated,
    .ger .CegButton.LongButton .rbDecorated:hover, .ger .CegButton.BigButton .rbDecorated:hover {
        background: transparent !important;
        background-image: none !important;
        color: inherit !important;
    }

.ger .SFWK_ButtonDisabled, .ger .SFWK_Button:disabled, .ger input[type="submit"].SFWK_Button:disabled, .ger input[type="button"].SFWK_Button:disabled, .ger button:disabled {
    opacity: 1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    background: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    border-color: var(--disabled-border) !important;
    pointer-events: none !important;
}

.ger .SFWK_ButtonDisabled, .ger button:disabled, .ger .RadButton.rbDisabled {
    background: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    filter: grayscale(35%) !important;
}

.ger button:disabled, .ger .SFWK_ButtonDisabled {
    background: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.ger .DateFilterTemplate_btnAnnulerFiltre {
    width: auto;
    border: none !important;
}

.ger .DateFilterTemplate_btnOpenFiltre {
    background-size: var(--icon-md-size) 100%;
    border: none !important;
    float: left;
}

.ger .SFWK_SubAction_Button, .ger .SFWK_SubAction_ButtonDisabled {
    margin: 0 0 0 var(--space-4);
    display: block;
}

.ger .SFWK_SubAction_Button {
    color: var(--primary) !important;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.ger .SFWK_SubAction_ButtonDisabled::before {
    color: var(--disabled-bg) !important;
    opacity: 0.5 !important;
    display: inline-block;
    line-height: 1;
    cursor: default !important;
}

.ger .SFWK_SubAction_Button::before {
    display: inline-block;
    line-height: 1;
    cursor: pointer !important;
    position: relative;
    top: 0.5px;
}

.ger .SFWK_SubAction_Button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-1);
    filter: brightness(0.97);
}

.ger .SFWK_SubAction_Button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.ger input[type="submit"].SFWK_ButtonDisabled, .ger input[type="submit"].SFWK_Button:disabled, .ger input[type="button"].SFWK_ButtonDisabled, .ger input[type="button"].SFWK_Button:disabled {
    background: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    box-shadow: none !important;
    filter: grayscale(55%) !important;
    cursor: not-allowed !important;
    font-weight: normal;
}

.ger input[type="image"]:not([onclick]) {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.ger input[type="image"][onclick] {
    display: inline-block !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    object-fit: contain !important;
}

.ger img[onclick] {
    display: inline-block !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    border-radius: var(--radius-sm);
    background: transparent !important;
    cursor: pointer;
    object-fit: contain !important;
    padding: var(--space-2) !important;
    margin-left: var(--space-4);
}

    .ger img[onclick]:hover {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent), var(--shadow-2);
    }

.ger input[type="image"][disabled] {
    cursor: not-allowed !important;
}

.ger .RadButton_Default.rbSkinnedButton, .RadButton_Default.rbVerticalButton, .RadButton_Default .rbDecorated, .RadButton_Default .rbSplitRight, .RadButton_Default .rbSplitLeft {
    background-image: none !important;
}

.ger .RadButton.rbImageButton {
    width: var(--control-height) !important;
    height: var(--control-height) !important;
    min-width: var(--control-height) !important;
    min-height: var(--control-height) !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-1) !important;
}

    .ger .RadButton.rbImageButton :is(.rbDecorated, .rbText) {
        background-image: none !important;
    }

.ger .OptionGrid_undobutton {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    min-height: var(--control-height);
    line-height: var(--line-height-normal);
    padding: var(--button-padding-y) var(--button-padding-x);
    display: block;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--tertiary);
    color: var(--body-content);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background .09s ease, box-shadow .09s ease, opacity .09s ease, border-color .09s ease, color .09s ease;
    align-content: center;
    font-weight: var(--font-weight-regular) !important;
}

    .ger .OptionGrid_undobutton:hover {
        background: var(--component-header-hover-background);
        border-color: var(--component-header-hover-background);
        color: var(--component-header-selected-color);
        box-shadow: var(--shadow-2);
    }

    .ger .OptionGrid_undobutton:active {
        background: color-mix(in srgb, var(--component-header-hover-background) 80%, black 20%);
        box-shadow: var(--shadow-1);
    }

    .ger .OptionGrid_undobutton:focus-visible {
        outline: var(--focus-ring);
        outline-offset: 2px;
    }

:is( button, input[type="button"], input[type="submit"], input[type="reset"], .RadButton, .CegButton, [gutype="GuButton"], a.c2-button, .c2-button ) ~ :is( button, input[type="button"], input[type="submit"], input[type="reset"], .RadButton, .CegButton, [gutype="GuButton"], a.c2-button, .c2-button ):not(.BoutonApres):not(.BoutonAvant) {
    margin-left: var(--space-8) !important;
}

#domaine_logo input[type="image"] {
    border-radius: var(--radius-sm);
    padding: 2px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

    #domaine_logo input[type="image"]:hover {
        background-color: color-mix(in srgb, var(--secondary) 60%, white 40%) !important;
        box-shadow: var(--shadow-2);
    }

    #domaine_logo input[type="image"]:active {
        transform: translateY(0);
        box-shadow: var(--shadow-1);
    }

.rbPrimary {
    background-color: var(--primary-button) !important;
    color: white !important;
}


.rpExpanded .buttonLancementListeIcon {
    color: white !important;
}

.rpHeaderTemplate:hover .buttonLancementListeIcon {
    color: white !important;
}

.ger span.RadButton[id$="_btnActualSize"],
.ger span.RadButton[id$="_btnFitImage"] {
    width: 32px !important;
    min-width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

    .ger span.RadButton[id$="_btnActualSize"] input.rbDecorated,
    .ger span.RadButton[id$="_btnFitImage"] input.rbDecorated {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        cursor: pointer !important;
    }

    .ger span.RadButton[id$="_btnActualSize"] .rbPrimaryIcon,
    .ger span.RadButton[id$="_btnFitImage"] .rbPrimaryIcon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: 16px !important;
        height: 16px !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

.ger .button-primary {
    background: color-mix(in srgb, var(--primary) 8%, var(--tertiary)) !important;
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border-color)) !important;
    color: var(--primary) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-1) !important;
}

    .ger .button-primary:hover {
        background: color-mix(in srgb, var(--primary) 16%, var(--tertiary)) !important;
        border-color: var(--primary) !important;
        color: var(--primary) !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-2) !important;
    }

    .ger .button-primary:active {
        background: color-mix(in srgb, var(--primary) 22%, var(--tertiary)) !important;
        box-shadow: var(--shadow-1) !important;
    }

.ger .SFWK_ButtonColored {
    margin: 0px 0px 0px var(--space-4);
    padding-bottom: 2px;
    background-color: #337db3 !important;
    border-width: 1px;
    border-color: #212F41;
    border-style: solid;
    color: #FFFFFF !important;
    font-size: 10pt;
    font-weight: var(--font-weight-bold) !important;
    width: auto;
    height: 22px;
    min-width: 95px;
}
/* RadButton utilisé comme icône FontAwesome : pas de fond au hover */
.ger .RadButton.rbSkinnedButton.fa-solid.icon-action:not(.rbDisabled):hover,
.ger .RadButton.rbSkinnedButton.fa-regular.icon-action:not(.rbDisabled):hover,
.ger .RadButton.rbSkinnedButton.fa-brands.icon-action:not(.rbDisabled):hover {
    background-color: var(--icon-action-hover-bg) !important;
    border-color: var(--icon-action-hover-border) !important;
    box-shadow: 0 0 0 1px var(--icon-action-hover-border) !important;
}

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Label.css

   Ce fichier contient principalement les règles CSS pour :
   - label natif HTML : <label>
   - asp:Label : rendu HTML <span> ou balise texte selon contexte
   - libellés métiers / classes .label / [gutype="GuLabel"]

   Astuce :
   Rechercher label, .label et [gutype="GuLabel"].
   ========================================================================== */

.ger .SFWKActionBar_LeftCell [gutype="GuLabel"] {
    font-weight: var(--font-weight-semibold);
    color: var(--primary-contrast) !important;
    font-size: var(--font-md);
} 

.ger div.fieldWithoutLabel {
    padding-top: var(--space-16);
} 
.ger html.RadForm_Default.rfdLabel label {
    color: var(--body-content);
    font-family: var(--font-family);
    font-size: var(--font-sm);
}

.ger .label:has(+ .field :is(.gu_required)) > :is(label, [gutype="GuLabel"])::after {
    content: " *";
    color: var(--error);
    font-weight: var(--font-weight-bold);
    margin-left: var(--space-2);
}
.ger .fieldset.premierNiveau > legend {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-md);
    color: var(--primary);
    padding: 0 0.5rem;
    background-color: var(--body-content-bg);
    border-radius: var(--radius-sm);
    position: relative;
    top: -0.8rem;
    box-shadow: var(--shadow-2) !important;
}
.ger .TextReadOnly {
    min-height: var(--control-height);
    height: auto;
}
.ger .copyright {
    font-size: var(--font-xs);
}

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/InputField.css

   Ce fichier contient principalement les règles CSS pour :
   - champs natifs HTML : input[type="text"], input[type="password"], textarea
   - asp:TextBox : rendu HTML input / textarea
   - contrôles de saisie Telerik : RadInput, RadNumericTextBox, RadPicker selon markup
   - états readonly, disabled, erreur, validation

   Astuce :
   Rechercher input[type="text"], textarea, .riTextBox, .RadInput.
   ========================================================================== */
.ger :is( input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea ):not(.rcbInput):not(.riTextBox):not(.ruFakeInput):not(.ruFileInput) {
    font-family: var(--font-family);
    font-size: var(--font-md);
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-8);
    min-height: calc(2 * var(--space-8) + 1em);
    box-sizing: border-box;
    outline: none;
}
.ger :is(input, textarea)::placeholder {
    color: var(--input-placeholder);
}
.ger :is( input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea ):not(.rcbInput):not(.riTextBox):not(.ruFakeInput):not(.ruFileInput):where(:hover, :focus, :focus-visible) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}
.ger :is( input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select ):not(.rcbInput):not(.riTextBox):not(.ruFakeInput):not(.ruFileInput)
:where(:focus, :focus-visible) {
    box-shadow: var(--focus-ring);
}
.ger :is(input, textarea)[readonly] {
    background: color-mix(in srgb, var(--input-bg) 75%, var(--secondary) 25%) !important;
}
.ger .RadInput {
    font-size:var(--font-sm);
}
.ger :is( .RadInput, [class^="RadInput_"], [class*=" RadInput_"], .RadDateInput, [class^="RadDateInput_"], [class*=" RadDateInput_"] ) .riTextBox::placeholder {
    color: var(--input-placeholder) !important;
}
.ger :is( .RadInput, [class^="RadInput_"], [class*=" RadInput_"], .RadDateInput, [class^="RadDateInput_"], [class*=" RadDateInput_"] ) :is( .riHover .riTextBox, .riTextBox:hover, .riFocused .riTextBox, .riTextBox:focus, .riTextBox:focus-visible ) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.ger :is(.RadInput, [class^="RadInput_"], [class*=" RadInput_"])
.riError .riTextBox {
    border-color: var(--error) !important;
    background: color-mix(in srgb, var(--input-bg) 85%, var(--error) 15%) !important;
    box-shadow: none !important;
}
.ger .RadGrid .rgFilterBox {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.ger .RadGrid .rgFilterBox:where(:hover, :focus, :focus-visible) {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}
.ger .RadGrid .rgFilterRow select.rgFilterBox {
    height: calc(2 * var(--space-8) + 1em);
    line-height: var(--line-height) !important;
}
.ger .RadGrid .rgFilterRow :is(input.rgFilterBox, select.rgFilterBox) {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    line-height: normal !important;
}
.ger .RadGrid .rgFilterRow :is(.RadInput, .RadDateInput, .RadPicker) {
    display: block;
    height: var(--control-height) !important;
}
.ger .RadGrid .rgFilterRow :is(.RadInput, .RadDateInput, .RadPicker) .riTextBox {
    line-height: normal !important;
    box-sizing: border-box;
    height: 100% !important;
    min-height: 100% !important;
    padding: 0 var(--space-8) !important;
}
.ger :is( input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"] ):not(.rcbInput):not(.riTextBox):not(.ruFakeInput):not(.ruFileInput) {
    padding-left: var(--control-padding-x);
    padding-right: var(--control-padding-x);
}
.ger :is( .RadInput, [class^="RadInput_"], [class*=" RadInput_"], .RadDateInput, [class^="RadDateInput_"], [class*=" RadDateInput_"] ) .riTextBox:not(textarea) {
    font-family: var(--font-family) !important;
    font-size: var(--font-xxs) !important;
    line-height: normal !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm) !important;
    padding: var(--space-4) var(--space-8) !important;
    box-sizing: border-box !important;
    outline: none !important;
    height: var(--control-height);
    min-height: var(--control-height) !important;
    padding-top: var(--control-padding-y) !important;
    padding-bottom: var(--control-padding-y) !important;
}
.ger :is( .RadInput, [class^="RadInput_"], [class*=" RadInput_"], .RadDateInput, [class^="RadDateInput_"], [class*=" RadDateInput_"] ) .riEmpty {
    color: var(--disabled-text) !important;
}
.ger .RadInput.RadInputDisabled, .ger .RadInput.RadInputDisabled:hover, .ger .RadInput.RadInputDisabled:focus-within {
    background-color: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
}
.ger .RadInputDisabled input.riTextBox, .ger .RadInputDisabled input.riTextBox:focus, .ger .RadInputDisabled input.riTextBox:hover {
    background-color: transparent !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

.ger input:not([type="image"])[disabled],
.ger input:not([type="image"])[disabled]:hover,
.ger input:not([type="image"])[disabled]:focus {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}
.ger .RadInputDisabled .riBtn, .ger .RadInputDisabled .riButton {
    opacity: 0.4;
    pointer-events: none;
}
.ger .RadInputDisabled :is(.riTextBox, .riTextBox:hover, .riTextBox:focus, .riTextBox:focus-visible), .ger .RadInputDisabled.riHover .riTextBox, .ger .RadInputDisabled.riFocused .riTextBox, .ger .RadInputDisabled .riHover .riTextBox, .ger .RadInputDisabled .riFocused .riTextBox {
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
}
.ger :is(input:not([type="image"]), textarea):disabled {
    opacity: 1 !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    background-color: var(--disabled-bg) !important;
}
.ger :is(input:not([type="image"]), textarea, select):disabled, .ger :is(input:not([type="image"]), textarea, select)[disabled] {
    background-color: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.ger :is(input, textarea):disabled::placeholder, .ger :is(input, textarea)[disabled]::placeholder {
    color: var(--disabled-text) !important;
    opacity: 1 !important;
}
.ger :is(input, textarea, select):disabled:is(:hover, :focus, :focus-visible), .ger :is(input, textarea, select)[disabled]:is(:hover, :focus, :focus-visible) {
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
}
.ger .validation_error {
    border: 1px solid var(--error) !important;
    box-shadow: none !important;
}
.ger .validation_error .rcbInner {
    border: none;
    box-shadow: none !important;
}
.ger .validation_error:hover {
    box-shadow: 0 0 0 3px rgba(240, 82, 82, .25) !important;
}
.ger .validation_error:focus {
    box-shadow: 0 0 0 1px var(--error) !important;
}


.ger div.field:has(> div.field),
.ger div.field:has(> table),
.ger div.field:has(> fieldset) {
    display: block;
    width: 100%;
    min-width: 0;
}

.ger div.field:not(:has(> div.field)):not(:has(> table)):not(:has(> fieldset)) {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: var(--space-4);
}
.ger .field:has(textarea) {
    display: block;
}

.ger .field > img {
    flex: 0 0 auto;
}

.ger .Description {
    width: auto !important;
}

.ger .MultiSelectionList_TextBoxFiltre {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}

.ger .MultiSelectionList_TextBoxFiltre .RadInput,
.ger .MultiSelectionList_TextBoxFiltre .riSingle {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

.ger .MultiSelectionList_TextBoxFiltre .riTextBox {
    width: 100% !important;
}

.ger .MultiSelectionList_TextBoxFiltre .RadButton {
    flex: 0 0 auto;
}
.ger .RadPicker .rcDisabled {
    filter: alpha(opacity=50) !important;
    opacity: .5 !important;
}
.ger .fieldWithoutLabel {
    padding-top: calc( (var(--font-xxs) * var(--line-height-normal)) + var(--space-4) ) !important;
}

.ger .field > label {
    margin: 0;
    line-height: var(--control-height);
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
}
.ger textarea {
    font-family: var(--font-family) !important;
    font-size: var(--font-xxs) !important;
    line-height: normal !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--control-padding-y) var(--control-padding-x) !important;
    box-sizing: border-box !important;
    outline: none !important;
    resize: vertical;
}

.ger textarea:is(:hover, :focus, :focus-visible) {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.ger .field > span[gutype="GuTextBox"]:has(textarea.riTextBox),
.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) > .RadInputMultiline,
.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) > .riSingle.RadInputMultiline {
    display: block !important;
    flex: 1 1 auto;
    width: 100% ;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ger .RadInputMultiline textarea.riTextBox,
.ger textarea.riTextBox {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box !important;
    resize: vertical;
    font-size:var(--font-sm) !important;
}

.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) > br {
    display: none;
}

.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) > [id$="__lblCharacterCounter"],
.ger span[gutype="GuTextBox"]:has(textarea.riTextBox) > .gu_formvalidator_error {
    display: block;
    width: 100%;
    box-sizing: border-box;
}
.ger .field > input[type="radio"] {
    flex-shrink: 0;
}

.ger .field > input[type="radio"] + label {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/DropDownList.css

   Ce fichier contient principalement les règles CSS pour :
   - liste déroulante native HTML : <select>
   - asp:DropDownList : généralement rendu en HTML avec <select>
   - telerik:RadDropDownTree : .RadDropDownTree / .rddt*
   - select présents dans les filtres Telerik RadGrid

   Astuce :
   Rechercher select, .RadDropDownTree, .rddtInner, .rgFilterRow.
   ========================================================================== */
.ger .rgHeaderFilters .rgHeaderFilterItem select {
    font-size: var(--font-sm);
}

.ger select:where(:hover, :focus, :focus-visible) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.ger select.ListItemInError, .ger select.gu_dropdownlist_error {
    border-color: var(--error) !important;
    background: color-mix(in srgb, var(--input-bg) 85%, var(--error) 15%) !important;
    box-shadow: none !important;
}

.ger select:disabled, .ger select[disabled] {
    opacity: 1 !important;
    background: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.ger select {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--control-height-sm);
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: var(--control-padding-y) var(--space-24) var(--control-padding-y) var(--control-padding-x);
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 12px center, right 7px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    height: var(--control-height);
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]) {
    font-family: var(--font-family);
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]) .rddtInner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--control-height);
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    box-shadow: none !important;
    height: var(--control-height);
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]) .rddtFakeInput {
    flex: 1 1 auto;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: var(--control-padding-y) var(--control-padding-x) !important;
    line-height: normal !important;
    box-shadow: none !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]) .rddtClearButton {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"])
.rddtInner:where(:hover, :focus-within) {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]).rddtDisabled .rddtInner, .ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]).aspNetDisabled .rddtInner {
    background: var(--disabled-bg) !important;
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
    color: var(--disabled-text) !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]) .rddtIcon {
    flex: 0 0 auto;
    border-left: 1px solid color-mix(in srgb, var(--input-border) 55%, transparent 45%) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: var(--control-height);
    min-width: var(--control-height);
    height: 100%;
}

.ger .RadDropDownTree .rddtIcon::after {
    content: "▾";
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: var(--control-height);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--input-text);
    opacity: .65;
    transform: translateY(-1px);
}

.ger .RadTreeView .rtHover .rtIn {
    background: none !important;
    border-color: transparent !important;
    background-color: none !important;
    background-image: none !important;
}

.ger .RadGrid .rgFilterRow select.rgFilterBox,
.ger .RadGrid .rgFilterRow select.filterCeg {
    box-sizing: border-box;
    padding-right: clamp(12px, 2.2em, 4px) !important;
    background-position: right 8px center, right 3px center !important;
    white-space: nowrap;
    overflow: hidden;
}

.ger .field > span[gutype="GuDropDownList"] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    white-space: nowrap;
}

.ger .field > span[gutype="GuDropDownList"] select {
    width: auto;
    min-width: 120px;
    max-width: 100%;
    flex: 0 1 auto;
}

.ger .field > span[gutype="GuDropDownList"] > span {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    vertical-align:middle;
}

.ger select:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error),
.ger .gu_required select:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error),
.ger span:is(.validation_error, .has-error) select.gu_required {
    border-color: var(--error) !important;
    border-width: 1px !important;
    border-style: solid !important;
    background-color: var(--input-bg) !important;
    box-shadow: none !important;
}

.ger select:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):where(:hover, :focus, :focus-visible),
.ger .gu_required select:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):where(:hover, :focus, :focus-visible),
.ger span:is(.validation_error, .has-error) select.gu_required:where(:hover, :focus, :focus-visible) {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent) !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]):is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error) .rddtInner,
.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]).gu_required:is(.validation_error, .has-error) .rddtInner {
    border-color: var(--error) !important;
    box-shadow: none !important;
}

.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]):is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):where(:hover, :focus-within) .rddtInner,
.ger :is(.RadDropDownTree, [class^="RadDropDownTree_"], [class*=" RadDropDownTree_"]).gu_required:is(.validation_error, .has-error):where(:hover, :focus-within) .rddtInner {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent) !important;
}
.ger .field > span[gutype="GuDropDownList"]:only-child {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Combobox.css

   Ce fichier contient les règles CSS pour :
   - telerik:RadComboBox : .RadComboBox / .rcb*
   - popup / liste déroulante associée au RadComboBox
   - variantes hover, focus, disabled, erreurs, items et drop-down Telerik

   Astuce :
   Rechercher .RadComboBox, .rcbInput, .rcbArrowCell, .rcbItem.
   ========================================================================== */
/* Règles CSS pour le composant telerik:RadComboBox */
.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) {
    font-family: var(--font-family);
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]), .ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) table {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) td {
    padding: 0 !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 0 !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbInput {
    font-family: var(--font-family) !important;
    line-height: var(--line-height) !important;
    border: 0 !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbInputCell {
    width: auto !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbArrowCell {
    width: var(--space-32) !important;
    min-width: var(--space-32) !important;
    max-width: var(--space-32) !important;
    background: transparent !important;
    white-space: nowrap !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbArrowCell a {
    display: block !important;
    width: var(--space-24) !important;
    min-width: var(--space-24) !important;
    min-height: calc(2 * var(--space-8) + 1em) !important;
    border: 0 !important;
    outline: none !important;
    background-color: transparent !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--body-content) 50%), linear-gradient(135deg, var(--body-content) 50%, transparent 50%) !important;
    box-shadow: none !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    cursor: pointer;
    background-position: 50% 55%, 50% 45% !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]):where(:hover, :focus-within) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring) !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]):where(:hover, :focus-within) table {
    border-color: var(--primary) !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbInput.validation_error, .ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]) .rcbInput.ListItemInError {
    outline: 2px solid var(--error) !important;
    outline-offset: -1px;
    background: color-mix(in srgb, var(--input-bg) 85%, var(--error) 15%) !important;
}

.ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) {
    background: var(--body-content-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-2) !important;
}

.ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbItem:hover, .ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbHovered {
    background: var(--component-header-hover-background) !important;
    color: var(--component-header-hover-content) !important;
}

.ger :is(.RadAutoCompleteBox, [class^="RadAutoCompleteBox_"], [class*=" RadAutoCompleteBox_"]) {
    font-family: var(--font-family);
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
}

.ger :is(.RadAutoCompleteBox, [class^="RadAutoCompleteBox_"], [class*=" RadAutoCompleteBox_"])
:is(input[type="text"], .racInput, .racTextBox) {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-4) var(--space-8) !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.ger :is(.RadAutoCompleteBox, [class^="RadAutoCompleteBox_"], [class*=" RadAutoCompleteBox_"])
:is(input[type="text"], .racInput, .racTextBox):where(:hover, :focus, :focus-visible) {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"])
.rcbArrowCell a {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    color: var(--input-text) !important;
    position: relative !important;
}

.ger :is(.RadComboBox, [class^="RadComboBox_"], [class*=" RadComboBox_"]):hover
.rcbArrowCell a::after {
    opacity: 1;
}

.ger :is(.RadComboBox.RadComboBoxDropDownOpen, .RadComboBox.rcbExpanded)
.rcbArrowCell a::after {
    transform: translate(-50%, -65%) rotate(180deg);
}

.ger .RadComboBox.gu_required, .ger .RadComboBox.loadOnDemand.gu_required {
    border-width: 1px !important;
    border-color: var(--input-border);
}

.ger .RadComboBox.gu_required table, .ger .RadComboBox.loadOnDemand.gu_required table {
    border-color: var(--input-border);
}

.ger .RadComboBox {
    font-family: var(--font-family);
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    font-size: var(--font-sm) !important;
    line-height: normal !important;
    overflow: hidden !important;
}

.ger .RadComboBox .rcbInput {
    background: transparent !important;
    color: var(--input-text) !important;
    outline: none !important;
    padding: var(--control-padding-y) var(--control-padding-x) !important;
    box-sizing: border-box !important;
    height: var(--control-height);
    font-size: var(--font-sm);
}

.ger .RadComboBox .rcbArrowCell {
    width: 22px !important;
    min-width: 22px !important;
    background: transparent !important;
    max-width: 32px !important;
    border: 0 !important;
}

.ger .RadComboBox .rcbArrowCell a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
}

.ger .RadComboBox:where(:hover, :focus-within) {
    border-color: var(--primary);
    box-shadow: var(--focus-ring) !important;
}

.ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbList, .ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbScroll {
    background: var(--body-content-bg) !important;
}

.ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbItem:hover, .ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbHovered, .ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbCheckAllItemsHovered {
    background: var(--component-header-hover-background) !important;
    color: var(--component-header-hover-content) !important;
    gap: var(--space-8);
}

.ger :is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"]) .rcbSelected {
    background: var(--component-header-selected-background) !important;
    color: var(--component-header-selected-color) !important;
}

.ger .RadGrid .rgPager .RadComboBox, .ger .RadGrid .rgPager .RadComboBox_Default {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
}

.ger .RadGrid .rgPager .RadComboBox table, .ger .RadGrid .rgPager .RadComboBox td {
    background: transparent !important;
}

.ger .RadGrid .rgPager .RadComboBox .rcbInput {
    background: transparent !important;
    color: var(--input-text) !important;
    border: 0 !important;
    padding: var(--control-padding-y) var(--control-padding-x) !important;
    min-height: var(--control-height) !important;
    height: var(--control-height) !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
}

.ger .RadGrid .rgPager .RadComboBox .rcbArrowCell {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    background: transparent !important;
}

.ger .RadGrid .rgPager .RadComboBox .rcbArrowCell a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
}

.ger .RadGrid .rgPager .RadComboBox .rcbArrowCell a::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -35%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid var(--input-text) !important;
    opacity: 0.75 !important;
}

.ger .RadGrid .rgPager .RadComboBox:where(:hover, :focus-within) {
    border-color: var(--primary) !important;
    box-shadow: var(--focus-ring) !important;
}

.ger .RadGrid .rgPager .rgPagerLabel {
    line-height: var(--line-height-tight);
    white-space: nowrap;
}

.ger .RadGrid td.rgPagerCell {
    border: 0;
}

.ger .aspNetDisabled {
    opacity: 1 !important;
    filter: none !important;
}

.ger .RadComboBox:has(table.rcbDisabled) {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    box-sizing: border-box !important;
    background: var(--disabled-bg) !important;
    border: 1px solid var(--disabled-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.ger .RadComboBox:has(table.rcbDisabled):where(:hover, :focus-within),
.ger span[disabled] .RadComboBox:where(:hover, :focus-within) {
    border-color: var(--disabled-border) !important;
    box-shadow: none !important;
}

.ger .RadComboBox table.rcbDisabled,
.ger .RadComboBox table.rcbDisabled:hover,
.ger .RadComboBox table.rcbDisabled:focus-within {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: none !important;
}

.ger .RadComboBox table.rcbDisabled,
.ger .RadComboBox table.rcbDisabled * {
    transition: none !important;
}

.ger .RadComboBox table.rcbDisabled .rcbInputCell,
.ger .RadComboBox table.rcbDisabled .rcbArrowCell {
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
}

.ger .RadComboBox table.rcbDisabled .rcbInput[disabled],
.ger .RadComboBox table.rcbDisabled .rcbInput[disabled]:hover,
.ger .RadComboBox table.rcbDisabled .rcbInput[disabled]:focus,
.ger .RadComboBox table.rcbDisabled .rcbInput[disabled]:focus-visible {
    height: 100% !important;
    min-height: 0 !important;
    line-height: normal !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    outline: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--disabled-text) !important;
}

.ger .RadComboBox table.rcbDisabled .rcbInput.rcbEmptyMessage[disabled],
.ger .RadComboBox table.rcbDisabled .rcbInput[disabled]::placeholder {
    color: var(--disabled-text) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--disabled-text) !important;
}

.ger .RadComboBox table.rcbDisabled .rcbArrowCell,
.ger .RadComboBox table.rcbDisabled .rcbArrowCell a {
    opacity: var(--disabled-icon-opacity) !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    border: 0 !important;
    box-shadow: none !important;
}

.ger .RadGrid .rgFilterRow select.rgFilterBox, .ger .RadGrid .rgFilterRow select.filterCeg {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
    background-position: right 7px center, right 2px center !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding: var(--space-4) var(--space-8);
}

.ger .RadGrid .rgFilterRow select.rgFilterBox::-ms-expand, .ger .RadGrid .rgFilterRow select.filterCeg::-ms-expand {
    display: none;
}


.ger .RadGrid .rgPager .rgAdvPart {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    vertical-align: middle;
}

.ger .RadGrid .rgPager .rgAdvPart .RadComboBox, .ger .RadGrid .rgPager .rgAdvPart .RadComboBox_Default, .ger .RadGrid .rgPager .rgAdvPart [id$="_PageSizeComboBox"] {
    width: 68px !important;
    min-width: 68px !important;
    white-space: nowrap !important;
}

.ger .RadGrid .rgPager .rgAdvPart .RadComboBox, .ger .RadGrid .rgPager .rgAdvPart .RadComboBox_Default {
    height: var(--control-height) !important;
}

.ger .RadGrid .rgPager .rgAdvPart .RadComboBox table, .ger .RadGrid .rgPager .rgAdvPart .RadComboBox_Default table {
    height: var(--control-height) !important;
}

.ger .RadGrid .rgPager .rgAdvPart .RadComboBox .rcbInput, .ger .RadGrid .rgPager .rgAdvPart .RadComboBox_Default .rcbInput {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    line-height: calc(var(--control-height) - 2px) !important;
    padding-top: 0 !important;
}

.cloee2
:is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"])
.rcbItem > label, .cloee2
:is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"])
.rcbHovered > label, .cloee2
:is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"])
.rcbCheckAllItems > label, .cloee2
:is(.RadComboBoxDropDown, [class^="RadComboBoxDropDown_"], [class*=" RadComboBoxDropDown_"])
.rcbCheckAllItemsHovered > label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    cursor: pointer;
}

.ger .RadComboBoxDropDown .rcbHovered > label {
    color: var(--primary-contrast) !important;
}

.ger .RadComboBoxDropDown .rcbCheckAllItemsHovered > label {
    color: var(--primary-contrast) !important;
}



.ger .RadComboBox > table {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
}

.ger .RadComboBox .rcbInputCell,
.ger .RadComboBox .rcbArrowCell {
    height: 100% !important;
    vertical-align: middle !important;
    background: transparent !important;
    border: 0 !important;
}

.ger .RadComboBox .rcbInput,
.ger fieldset.secondNiveau .RadComboBox.RadComboBox_Default .rcbInput {
    min-height: 0 !important;
    line-height: normal !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}



.ger .RadComboBox .rcbArrowCell a,
.ger fieldset.secondNiveau .RadComboBox.RadComboBox_Default .rcbArrowCell a {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    line-height: normal !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--input-text) 50%), linear-gradient(135deg, var(--input-text) 50%, transparent 50%) !important;
    background-position: calc(100% - 15.5px) 50%, calc(100% - 11px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
}

.ger .field select:not([multiple]) {
    max-width: 100% !important;
    display: inline-block !important;
    flex: 0 1 auto !important;
}


.ger .RadComboBox:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):not(:has(table.rcbDisabled)),
.ger .RadComboBox.gu_required:is(.validation_error, .has-error):not(:has(table.rcbDisabled)) {
    border-color: var(--error) !important;
    border-width: 1px !important;
    border-style: solid !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
}

.ger .RadComboBox:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):not(:has(table.rcbDisabled)) > table,
.ger .RadComboBox.gu_required:is(.validation_error, .has-error):not(:has(table.rcbDisabled)) > table {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ger .RadComboBox:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):not(:has(table.rcbDisabled)) .rcbInput,
.ger .RadComboBox.gu_required:is(.validation_error, .has-error):not(:has(table.rcbDisabled)) .rcbInput {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.ger .RadComboBox:is(.validation_error, .has-error, .ListItemInError, .gu_dropdownlist_error):not(:has(table.rcbDisabled)):where(:hover, :focus-within),
.ger .RadComboBox.gu_required:is(.validation_error, .has-error):not(:has(table.rcbDisabled)):where(:hover, :focus-within) {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 25%, transparent) !important;
}

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Listbox.css

   Ce fichier contient principalement les règles CSS pour :
   - liste native HTML : <select multiple> / listbox
   - asp:ListBox : rendu HTML <select multiple>
   - variantes d'erreur / disabled liées aux listes

   ========================================================================== */
.ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-sm);
}
.ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) :where(.rlbGroup, .rlbList) {
    border: 1px solid var(--input-border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--input-bg) !important;
}
.ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) :is(.rlbItem, .rlbHovered):not(.rlbButton) {
    padding: var(--space-4) var(--space-8) !important;
}
.ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) .rlbItem:hover, .ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) .rlbHovered {
    background: var(--grid-line-hover-background) !important;
    color: var(--component-header-hover-content) !important;
    }
.ger :is(.RadListBox, [class^="RadListBox_"], [class*=" RadListBox_"]) .rlbSelected {
    background: var(--component-header-selected-background) !important;
    color: var(--component-header-selected-color) !important;
}
.ger :is(.RadListView, [class^="RadListView_"], [class*=" RadListView_"]) {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
}
.ger .RadListBox[disabled], .ger .RadListBox.aspNetDisabled {
    border-color: var(--disabled-border) !important;
    background: var(--disabled-bg) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/RadioButton.css

   Ce fichier contient principalement les règles CSS pour :
   - radio natif HTML : <input type="radio">
   - asp:RadioButton : généralement rendu en HTML avec <input type="radio">
   - telerik:RadButton utilisé en mode radio toggle : .RadButton .rbToggleRadio
   - telerik:RadRadioButton : .RadRadioButton / .rrb*

   Astuce :
   Rechercher .rbToggleRadio ou .RadRadioButton pour les variantes Telerik.
   ========================================================================== */
.ger {
    --choice-size: 16px;
    --choice-gap: var(--space-8);
    --choice-border-width: 1px;
}

    .ger input[type="radio"] {
        appearance: none;
        -webkit-appearance: none;
        width: var(--choice-size);
        height: var(--choice-size);
        border: var(--choice-border-width) solid var(--input-border);
        border-radius: 50%;
        background: var(--input-bg);
        box-shadow: none;
        display: inline-grid;
        place-content: center;
        margin: 0;
        vertical-align: middle;
        cursor: pointer;
    }

        .ger input[type="radio"]::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-contrast);
            transform: scale(0);
            transition: transform .12s ease;
        }

        .ger input[type="radio"]:checked {
            background: var(--primary);
            border-color: var(--primary);
            border-width: 2px;
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
        }

            .ger input[type="radio"]:checked::before {
                transform: scale(1);
            }

        .ger input[type="radio"]:hover {
            border-color: var(--primary);
        }

        .ger input[type="radio"]:focus, .ger input[type="radio"]:focus-visible {
            outline: none;
            box-shadow: var(--focus-ring);
        }

        .ger input[type="radio"] + label {
            margin-left: var(--choice-gap);
            vertical-align: middle;
            cursor: pointer;
            font-family: var(--font-family);
            font-size: var(--font-sm);
            font-weight: normal;
            line-height: var(--line-height-normal);
        }

    .ger .field td:has(> input[type="radio"] + label) {
        vertical-align: middle;
        white-space: nowrap;
        padding-right: var(--space-16);
    }

    .ger label > input[type="radio"] {
        margin-right: var(--choice-gap);
    }

    .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"])
    .rbToggleRadio .rbIcon {
        width: var(--choice-size);
        height: var(--choice-size);
        border: var(--choice-border-width) solid var(--input-border);
        border-radius: 50%;
        background: var(--input-bg);
        display: inline-grid;
        place-content: center;
        box-sizing: border-box;
        background-image: none !important;
    }

        .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"])
        .rbToggleRadio .rbIcon::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--primary-contrast);
            transform: scale(0);
            transition: transform .12s ease;
        }

    .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]).rbChecked
    .rbToggleRadio .rbIcon {
        background: var(--primary);
        border-color: var(--primary);
    }

        .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]).rbChecked
        .rbToggleRadio .rbIcon::before {
            transform: scale(1);
        }

    .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]):hover
    .rbToggleRadio .rbIcon {
        border-color: var(--primary);
    }

    .ger :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]):focus-within
    .rbToggleRadio .rbIcon {
        box-shadow: var(--focus-ring);
    }

    .ger :is(.RadRadioButton, [class^="RadRadioButton_"], [class*=" RadRadioButton_"]) {
        background-image: none !important;
    }

        .ger :is(.RadRadioButton, [class^="RadRadioButton_"], [class*=" RadRadioButton_"])
        :is(.rrbIcon, .rbIcon) {
            width: var(--choice-size);
            height: var(--choice-size);
            border: var(--choice-border-width) solid var(--input-border);
            border-radius: 50%;
            background: var(--input-bg);
            display: inline-grid;
            place-content: center;
            box-sizing: border-box;
            background-image: none !important;
        }

        .ger :is(.RadRadioButton, [class^="RadRadioButton_"], [class*=" RadRadioButton_"]).rrbChecked
        :is(.rrbIcon, .rbIcon) {
            background: var(--primary);
            border-color: var(--primary);
        }

    .ger input[type="radio"]:not(:disabled):hover {
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
    }

    .cloee2
    :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]):not(.rbDisabled):hover
    .rbToggleRadio .rbIcon {
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
    }

    .cloee2
    :is(.RadRadioButton, [class^="RadRadioButton_"], [class*=" RadRadioButton_"]):not(.rrbDisabled):hover
    :is(.rrbIcon, .rbIcon) {
        border-color: var(--primary);
        box-shadow: var(--focus-ring);
    }

    .ger input[type="radio"]:checked:not(:disabled):hover::before {
        transform: scale(1.1);
    }

    .cloee2
    :is(.RadButton, [class^="RadButton_"], [class*=" RadButton_"]).rbChecked:hover
    .rbToggleRadio .rbIcon::before, .cloee2
    :is(.RadRadioButton, [class^="RadRadioButton_"], [class*=" RadRadioButton_"]).rrbChecked:hover
    :is(.rrbIcon, .rbIcon)::before {
        transform: scale(1.1);
    }

    .ger input[type="radio"]:disabled,
    .ger input[type="radio"][disabled] {
        opacity: 1 !important;
        cursor: not-allowed !important;
        border-color: var(--disabled-border) !important;
        background: var(--disabled-bg) !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .ger input[type="radio"]:checked:disabled,
    .ger input[type="radio"]:checked[disabled] {
        border-color: var(--disabled-border) !important;
        background: color-mix(in srgb, var(--disabled-border) 65%, var(--input-bg) 35%) !important;
        border-width: 2px;
    }

        .ger input[type="radio"]:checked:disabled::before,
        .ger input[type="radio"]:checked[disabled]::before {
            transform: scale(1) !important;
            background: var(--primary-contrast) !important;
        }

    .ger input[type="radio"]:disabled:hover,
    .ger input[type="radio"][disabled]:hover {
        border-color: var(--disabled-border) !important;
        box-shadow: none !important;
    }

    .ger input[type="radio"]:disabled + label,
    .ger input[type="radio"][disabled] + label {
        color: var(--disabled-text) !important;
        cursor: not-allowed !important;
    }

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Checkbox.css

   Ce fichier contient principalement les règles CSS pour :
   - case à cocher native HTML : <input type="checkbox">
   - asp:CheckBox : généralement rendu en HTML avec <input type="checkbox">
   - variantes en lecture seule / désactivées / inline associées à <label> ou <span>

   Remarque :
   Les contrôles Telerik checkbox spécifiques peuvent parfois être stylés ailleurs
   s'ils ne reposent pas directement sur le markup natif.
   ========================================================================== */

.ger {
    --choice-size: 16px;
    --choice-gap: var(--space-8);
    --choice-border-width: 1px;
    --choice-radius: 3px;
    --choice-check-size: 10px;
}


    .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]) {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: var(--choice-size) !important;
        height: var(--choice-size) !important;
        min-width: var(--choice-size) !important;
        box-sizing: border-box !important;
        border: var(--choice-border-width) solid color-mix(in srgb, var(--input-border) 80%, var(--primary) 20%) !important;
        border-radius: var(--choice-radius) !important;
        background-color: var(--input-bg) !important;
        background-image: none !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: var(--choice-check-size) var(--choice-check-size) !important;
        box-shadow: none !important;
        display: inline-block !important;
        position: relative !important;
        vertical-align: middle !important;
        margin: var(--space-4) var(--space-8);
        padding: 0 !important;
        line-height: 0 !important;
        cursor: pointer !important;
        overflow: hidden !important;
        transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease !important;
    }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):not(:disabled):hover {
            border-color: var(--primary) !important;
            background-color: color-mix(in srgb, var(--primary) 8%, var(--input-bg) 92%);
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):focus,
        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):focus-visible {
            outline: none !important;
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):checked {
            background-color: var(--primary) !important;
            border-color: var(--primary) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.1 8.3 11 1.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        }


        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):disabled,
        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"])[disabled] {
            cursor: not-allowed !important;
            border-color: var(--disabled-border) !important;
            background-color: var(--disabled-bg, color-mix(in srgb, var(--input-bg) 70%, var(--disabled-border) 30%)) !important;
            box-shadow: none !important;
            opacity: 1 !important;
            filter: grayscale(.25);
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):checked:disabled,
        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):checked[disabled] {
            border-color: var(--disabled-border) !important;
            background-color: color-mix(in srgb, var(--disabled-border) 65%, var(--input-bg) 35%) !important;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.1 8.3 11 1.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):disabled:hover,
        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"])[disabled]:hover {
            border-color: var(--disabled-border) !important;
            box-shadow: none !important;
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]):disabled + label,
        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"])[disabled] + label {
            color: var(--disabled-text) !important;
            cursor: not-allowed !important;
        }

        .ger input[type="checkbox"]:not(#calendrierContainer input[type="checkbox"]) + label {
            margin-left: var(--choice-gap);
            vertical-align: middle;
            cursor: pointer;
        }

    .ger input[type="checkbox"] + span {
        margin-left: var(--choice-gap);
        padding-right: 4px;
    }

/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Form.css

   Ce fichier contient principalement les règles CSS pour :
   - conteneurs de formulaires métier : .blocFormulaire, .formulaire
   - zones de travail et fieldsets premier / second niveau
   - mise en page des labels + champs dans les écrans de formulaire

   Ce fichier ne cible pas un composant serveur unique, mais la structure globale
   des formulaires et l'assemblage des composants.
   ========================================================================== */
.ger .blocFormulaire {
    border: none;
    padding: var(--space-16);
}

.ger .formulaire {
    padding: var(--space-8);
    border-spacing: var(--space-8) !important;
}

.ger #zone_de_travail {
    border-color: var(--secondary);
    border-radius: var(--space-8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    background-color: var(--body-sub-bg) !important;
}

.ger fieldset.premierNiveau {
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, black 25%) !important;
    border-radius: var(--radius-md);
    background-color: var(--body-content-bg) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.10) !important;
    padding: var(--form-container-padding) !important;
    margin:0;
}

    .ger fieldset.premierNiveau > table {
        border-collapse: separate;
    }

        .ger fieldset.premierNiveau > table > tbody > tr > td {
            vertical-align: top;
            padding: 0 !important;
        }

.ger fieldset.secondNiveau {
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, white 15%) !important;
    border-radius: calc(var(--radius-sm) + 2px) !important;
    background-color: color-mix(in srgb, var(--body-sub-bg) 65%, white 35%) !important;
    box-shadow: var(--shadow-1) !important;
    padding: var(--form-container-padding) !important;
    margin: 0;
    height: 100%;
}

    .ger fieldset.secondNiveau > table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }


    .ger fieldset.secondNiveau .label {
        padding-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: var(--space-4);
    }

    .ger fieldset.secondNiveau .field {
        padding-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: var(--space-12, 12px) !important;
        display: flex;
        align-items: center;
        min-height: var(--control-height) !important;
        height: var(--control-height) !important;
        max-height: var(--control-height) !important;
    }

    .ger fieldset.secondNiveau .label > label,
    .ger fieldset.secondNiveau .label > span[gutype="GuLabel"] {
        display: inline-block;
        font-family: var(--font-family);
        font-size: var(--font-label, var(--font-sm, 0.875rem));
        line-height: var(--line-height-normal, 1.4);
        color: var(--body-secondary-content, #5c6a76);
        margin-bottom: var(--space-4, 4px);
        letter-spacing: 0.01em;
    }

    .ger fieldset.secondNiveau input[type="radio"] {
        width: 14px;
        height: 14px;
        margin: 0 var(--space-8) 0 0;
        vertical-align: middle;
        accent-color: var(--primary, #2f73a6);
    }

        .ger fieldset.secondNiveau input[type="radio"] + label {
            font-family: var(--font-family);
            font-size: var(--font-md, 1rem);
            font-weight: var(--font-weight-semibold);
            color: var(--title);
            vertical-align: middle;
        }


    .ger fieldset.secondNiveau #ctl00_ctl00_MainContent_MainEditable_pnlPromotion > table {
        width: 100%;
        border-collapse: separate;
        border-spacing: var(--space-16) var(--space-12);
        margin: 0;
    }

        .ger fieldset.secondNiveau #ctl00_ctl00_MainContent_MainEditable_pnlPromotion > table td {
            vertical-align: top;
            padding: 0 !important;
        }

    .ger fieldset.secondNiveau .field select,
    .ger fieldset.secondNiveau .field input[type="text"],
    .ger fieldset.secondNiveau .RadComboBox,
    .ger fieldset.secondNiveau .RadComboBox .rcbInput,
    .ger fieldset.secondNiveau .RadComboBox .rcbInputCell,
    .ger fieldset.secondNiveau .RadComboBox table {
        font-family: var(--font-family);
        font-size: var(--font-sm);
    }

    .ger fieldset.secondNiveau .field select {
        height: var(--control-height);
        border-radius: var(--radius-sm);
        border: 1px solid var(--input-border);
        background-color: var(--input-bg);
        color: var(--input-text);
        padding: 0 var(--space-24) 0 var(--control-padding-x);
        box-shadow: none;
    }

        .ger fieldset.secondNiveau .field select:focus,
        .ger fieldset.secondNiveau .RadComboBox .rcbInput:focus {
            outline: none;
            box-shadow: var(--focus-ring, 0 0 0 3px rgba(47,115,166,.25));
        }

        .ger fieldset.secondNiveau .field select:hover {
            border-color: color-mix(in srgb, var(--input-border, #9cb5c6) 80%, var(--primary, #2f73a6) 20%);
        }

    .ger fieldset.secondNiveau .RadComboBox_Default {
        border-radius: var(--radius-sm);
    }

        .ger fieldset.secondNiveau .RadComboBox_Default .rcbInputCell,
        .ger fieldset.secondNiveau .RadComboBox_Default .rcbArrowCell {
            border-color: var(--input-border, #9cb5c6) !important;
        }

        .ger fieldset.secondNiveau .RadComboBox_Default .rcbInput {
            height: var(--control-height) !important;
            line-height: var(--control-height) !important;
            padding: 0 var(--control-padding-x) !important;
            background: var(--input-bg) !important;
            color: var(--input-text) !important;
        }

        .ger fieldset.secondNiveau .RadComboBox_Default .rcbArrowCell a {
            height: var(--control-height) !important;
            line-height: var(--control-height) !important;
        }

        .ger fieldset.secondNiveau .RadComboBox_Default:hover .rcbInputCell,
        .ger fieldset.secondNiveau .RadComboBox_Default:hover .rcbArrowCell {
            border-color: color-mix(in srgb, var(--input-border) 70%, var(--primary) 30%) !important;
        }

        .ger fieldset.secondNiveau .RadComboBox_Default.rcbFocused .rcbInputCell,
        .ger fieldset.secondNiveau .RadComboBox_Default.rcbFocused .rcbArrowCell {
            border-color: var(--primary) !important;
        }

.ger fieldset.premierNiveau > legend {
    font-weight: 700;
    font-size: var(--font-legend);
    line-height: 1.2;
    color: var(--title);
    padding: var(--space-8) var(--space-12);
    margin-left: var(--space-8);
    position: relative;
}

    .ger fieldset.premierNiveau > legend::after {
        content: "";
        display: block;
    }


.ger fieldset.secondNiveau > legend {
    font-weight: 700;
    font-size: var(--font-sm);
    line-height: var(--line-height-tight);
    color: var(--title);
    background-color: color-mix(in srgb, var(--tertiary) 65%, white 35%);
    padding: var(--space-4) var(--space-8);
    margin-left: var(--space-4);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}

td:has(> fieldset) {
    vertical-align: top;
}

.ger .label,
.ger .field {
    padding: 0 !important;
}

    .ger .label > label:not(input[type="radio"] + label),
    .ger .label > :is(label:not(input[type="radio"] + label), span[gutype="GuLabel"]) {
        display: inline-block;
        margin: 0 0 var(--space-4) 0;
        font-family: var(--font-family);
        font-size: var(--font-xxs, 0.8125rem);
        line-height: var(--line-height-normal);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0.02em;
        color: var(--title);
        white-space: nowrap;
    }

.ger .field {
    margin: 0 0 var(--space-12) 0 !important;
}

    .ger .field > .TextReadOnly {
        box-sizing: border-box;
        display: inline-flex !important;
        align-items: flex-start;
        min-width: 0;
        min-height: var(--control-height);
        height: auto;
        padding: 0;
        line-height: var(--line-height);
        font-size: var(--font-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--body-content);
        background: transparent;
        border: 0;
        box-shadow: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        opacity: 1;
    }
        .ger .field > .TextReadOnly.isMultiline, .ger .field > .TextReadOnly[style*=""] {
            white-space: normal;
            padding-top: var(--space-8);
            padding-bottom: var(--space-8);
            height: auto;
            align-items: flex-start;
        }

        .ger .field > .TextReadOnly.isCode {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            letter-spacing: 0.01em;
        }

.ger .blocFormulaireBoutonsHeader {
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
}

.ger .WindowPopupBody fieldset.premierNiveau {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

.ger .WindowPopupBody .blocFormulaire > div > table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.ger .WindowPopupBody {
    overflow-x: hidden;
}


.ger fieldset.secondNiveau td {
    padding: 0;
}





.ger fieldset.premierNiveau .field:has(.AlignControls + .AlignControls) {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-8);
}

    .ger fieldset.premierNiveau .field:has(.AlignControls + .AlignControls) > .AlignControls:first-child {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
    }


    .ger fieldset.premierNiveau .field:has(.AlignControls + .AlignControls) > .AlignControls:not(:first-child) {
        flex: 0 0 auto;
    }

    .ger fieldset.premierNiveau .field:has(.AlignControls + .AlignControls) > .AlignControls:last-child {
        white-space: nowrap;
    }

.ger .field span img {
    padding-top: 0 !important;
    margin-left: var(--space-4);
    display: block;
}

.ger > span.TextReadOnly {
    display: block;
    font-weight: var(--font-weight-semibold);
    height: auto;
    line-height: 1.25;
}




.ger .field > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}


.ger fieldset.secondNiveau .field:has(textarea),
.ger fieldset.secondNiveau .field:has(textarea.riTextBox),
.ger .field:has(> span[gutype="GuTextBox"] textarea),
.ger .field:has(> span[gutype="GuTextBox"] textarea.riTextBox) {
    display: block !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: var(--space-16) !important;
}

    .ger .field:has(> span[gutype="GuTextBox"] textarea) > span[gutype="GuTextBox"],
    .ger .field:has(> span[gutype="GuTextBox"] textarea.riTextBox) > span[gutype="GuTextBox"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
    }

    .ger .field:has(> span[gutype="GuTextBox"] textarea) .RadInputMultiline,
    .ger .field:has(> span[gutype="GuTextBox"] textarea.riTextBox) .riSingle.RadInputMultiline {
        display: block !important;
        width: 100% ;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ger .field:has(> span[gutype="GuTextBox"] textarea) textarea,
    .ger .field:has(> span[gutype="GuTextBox"] textarea.riTextBox) textarea.riTextBox {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .ger .field:has(> span[gutype="GuTextBox"] textarea) > span[gutype="GuTextBox"] > br,
    .ger .field:has(> span[gutype="GuTextBox"] textarea.riTextBox) > span[gutype="GuTextBox"] > br {
        display: none !important;
    }
.ger textarea,
.ger .RadInputMultiline textarea.riTextBox {
    resize: none !important;
}

.ger .field > span.TextReadOnly[gutype="GuTextReadOnly"] {
    display: block !important;
    width: auto;
    box-sizing: border-box;
    height: auto !important;
    min-height: var(--control-height);
    max-height: 8rem;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: var(--line-height-normal);
    padding: var(--space-4) var(--space-8) var(--space-4) 0;
    align-items: flex-start;
}

.ger .field > div:not(.AlignControls):has(> span[gutype="GuTextBox"]),
.ger .field > span[gutype="GuTextBox"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.ger .field span[gutype="GuTextBox"] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

    .ger .field span[gutype="GuTextBox"] > .RadInput,
    .ger .field span[gutype="GuTextBox"] > .riSingle {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .ger .field span[gutype="GuTextBox"] .riTextBox {
        width: 100% !important;
        box-sizing: border-box;
    }

.ger .field:has(> span.TextReadOnly[gutype="GuTextReadOnly"] + span[gutype="GuButton"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--space-4) var(--space-8);
}

    .ger .field:has(> span.TextReadOnly[gutype="GuTextReadOnly"] + span[gutype="GuButton"]) > span.TextReadOnly[gutype="GuTextReadOnly"] {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .ger .field:has(> span.TextReadOnly[gutype="GuTextReadOnly"] + span[gutype="GuButton"]) > span[gutype="GuButton"] {
        flex: 1 1 100% !important;
        width: 100% !important;
        margin-top: var(--space-4);
    }

        .ger .field:has(> span.TextReadOnly[gutype="GuTextReadOnly"] + span[gutype="GuButton"]) > span[gutype="GuButton"] .RadButton {
            width: auto !important;
            max-width: 100% !important;
        }

.ger .dp-nationalite-layout {
    border-collapse: collapse;
    border-spacing: 0;
    width: auto;
}

.ger .dp-nationalite-layout-cell {
    padding: 0;
    vertical-align: top;
}

.ger .dp-nationalite-layout-cell-autre {
    padding-left: var(--space-4);
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Grid.css

   Ce fichier contient principalement les règles CSS pour :
   - telerik:RadGrid : .RadGrid / .rg*
   - en-têtes, lignes, filtre, pager, tri, sélection, commandes, export
   - zones "no records" et sous-éléments internes du grid Telerik

   Astuce :
   Rechercher .RadGrid, .rgHeader, .rgPager, .rgFilterRow, .rgCommandRow.
   ========================================================================== */


.ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"]) {
    background: var(--body-content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}

    .ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"]) :is(.rgHeader, thead.rgHeader, .rgGroupPanel, .rgFilterRow th, .rgPager) {
        background: var(--component-header-background);
        border-bottom: 1px solid var(--border-color);
    }



    .ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"]) :is(.rgSelectedRow td, .rgActiveRow td) {
        background: var(--component-header-selected-background) !important;
        color: var(--component-header-selected-color) !important;
    }

    .ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"]) .rgPagerCell .rgNumPart a:hover,
    .ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"]) .rgPagerCell :is(.rgPagerButton:hover, .rgActionButton:hover) {
        border-color: var(--primary) !important;
        color: var(--primary-contrast) !important;
        background-color: var(--primary) !important;
        border-radius: var(--radius-sm);
    }

.ger .RadGrid .rgCommandRow {
    background: -webkit-linear-gradient(left, var(--tertiary) 45%, var(--secondary)) !important;
    border-bottom: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border-color) 65%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

    .ger .RadGrid .rgCommandRow label,
    .ger .RadGrid .rgCommandRow span[gutype="GuLabel"] {
        color: var(--component-header-content);
        font-weight: 500;
    }

.ger .RadGrid_Default .rgCommandTable {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color) !important;
}

    .ger .RadGrid_Default .rgCommandTable tr td span {
        vertical-align: middle;
        align-items: center;
    }

.ger .RadGrid .rgCommandRow td[align="right"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    flex-wrap: nowrap;
    white-space: nowrap;
    min-width: 0;
}

    .ger .RadGrid .rgCommandRow td[align="right"] > span:not(.rgHeaderFilters):not(.spanBarre) {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .ger .RadGrid .rgCommandRow td[align="right"] span[style*="width:100%"] {
        width: auto !important;
        display: inline-flex;
        align-items: center;
    }

.ger .RadGrid .rgCommandRow
:is( .rgExpXLS, .butFiltreDisabled, .butTri ) {
    vertical-align: middle;
}

.ger .RadGrid .rgCommandRow .aspNetDisabled {
    opacity: 0.45;
    cursor: default;
}

.ger .RadGrid .rgCommandRow .spanBarre {
    opacity: 0.4;
    margin: 0 var(--space-4);
}

.ger .RadGrid .rgCommandRow
:is( .rgExpXLS, .butFiltreDisabled, .butTri, .rgExpPDF, .rgExpDOC, .rgExpCSV ) {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    background-size: 100% 100% !important;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
}

.ger .RadGrid .rgCommandRow :is(input[type="image"]) {
    object-fit: contain;
    padding: 0 !important;
}

.ger .RadGrid .rgCommandRow
:is(input[type="image"], input[type="submit"]) {
    line-height: 1;
    vertical-align: middle;
}

.ger .RadGrid .rgDataDiv :is(input[type="image"]) {
    padding: 0 !important;
}

.ger .RadGrid th.rgHeader.rgSorted,
.ger .RadGrid thead.rgHeader th.rgSorted {
    background-color: color-mix( in srgb, var(--primary) 12%, var(--component-header-background) 88% );
    border-bottom: 2px solid color-mix( in srgb, var(--primary) 45%, var(--border-color) 55% );
}

    .ger .RadGrid th.rgHeader.rgSorted > a {
        color: var(--component-header-content);
        text-decoration: none;
    }

    .ger .RadGrid th.rgHeader.rgSorted .rgSortAsc,
    .ger .RadGrid th.rgHeader.rgSorted .rgSortDesc {
        filter: none;
        opacity: 1;
    }

    .ger .RadGrid th.rgHeader.rgSorted:hover {
        background-color: color-mix( in srgb, var(--primary) 16%, var(--component-header-background) 84% );
    }

/* Colonnes triées : teinte de fond hors survol/sélection. */
.ger .RadGrid .rgAltRow td.rgSorted {
    background-color: color-mix(in srgb, var(--primary) 15%, var(--body-content-bg) 85%);
}

.ger .RadGrid .rgRow td.rgSorted {
    background-color: color-mix(in srgb, var(--tertiary) 75%, var(--secondary) 25%);
}

/* Survol RadGrid : couvrir toutes les cellules de la ligne.
   Après un refresh/Ajax, Telerik peut ne pas avoir encore réappliqué rgHoveredRow
   tant que la souris n'a pas bougé ; :hover reste donc indispensable. */
.ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"])
:is(.rgRow:hover, .rgAltRow:hover, .rgHoveredRow):not(.rgSelectedRow):not(.rgActiveRow) > td {
    background: var(--grid-line-hover-background) !important;
}

/* La sélection reste prioritaire sur le survol et sur la teinte des colonnes triées. */
.ger :is(.RadGrid, [class^="RadGrid_"], [class*=" RadGrid_"])
:is(.rgSelectedRow, .rgActiveRow) > td {
    background: var(--component-header-selected-background) !important;
    color: var(--component-header-selected-color) !important;
}

.RadGrid_Default .rgAltRow {
    background-color: color-mix(in srgb, var(--primary) 6%, var(--body-content-bg) 94%) !important;
}

.ger .RadGrid_Default .rgCommandTable tr td > span {
    display: inline-flex;
    align-items: center;
}

.ger .RadGrid_Default .rgCommandTable .spanBarre {
    display: inline-block;
    line-height: var(--control-height);
}

.ger .RadGrid .rgCommandRow span[gutype="GuLabel"] {
    display: inline-flex;
    align-items: center;
    line-height: var(--control-height);
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.ger .RadGrid_Default .rgCommandTable td {
    padding: var(--space-2);
}

.ger .RadGrid_Default .rgPager span, .ger .RadGrid_Default .rgPager div {
    font-size: var(--font-sm) !important;
}

.ger .RadGrid .rgRow td, .rgAltRow td, .rgRow td {
    padding: var(--space-2) !important;
    height: var(--control-height) !important;
}

.ger .RadGrid .rgHeader,
.ger .RadGrid .rgHeader a,
.ger .RadGrid .rgHeader span {
    font-size: var(--font-grid-header, var(--font-sm));
    font-weight: var(--font-weight-medium);
}

.ger .RadGrid td span {
    vertical-align: middle !important;
}


.ger .RadGrid .rgFilterRow,
.ger .RadGrid .rgFilterRow input,
.ger .RadGrid .rgFilterRow select {
    font-size: var(--font-xs, var(--font-sm)) !important;
}

    .ger .RadGrid .rgFilterRow input[type="image"] {
        padding: 0 !important;
    }


.ger .RadGrid_Default .rgCommandTable span {
    font-size: var(--font-grid-header);
}

.ger .RadGrid .rgRow > td, .RadGrid .rgAltRow > td, .RadGrid .rgEditRow > td, .RadGrid .rgFooter > td, .RadGrid .rgFilterRow > td, .RadGrid .rgHeader, .RadGrid .rgResizeCol, .RadGrid .rgGroupHeader td {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
}

.ger .RadGrid .rgHeader:has(> input[type="checkbox"]) {
    font-size: 0;
    line-height: 0;
}

    .ger .RadGrid .rgHeader:has(> input[type="checkbox"]) > input[type="checkbox"] {
        font-size: initial;
        line-height: normal;
        vertical-align: middle;
    }

.ger .rgFilterRow span {
    font-size: var(--font-xxs);
}


.ger td:has(.DateFilterTemplate_btnOpenFiltre) {
    align-items: center;
    gap: 0;
}

    .ger td:has(.DateFilterTemplate_btnOpenFiltre) > span[gutype="GuLabel"] {
        float: inline-end !important;
    }

        .ger td:has(.DateFilterTemplate_btnOpenFiltre) > span[gutype="GuLabel"]:empty {
            display: none;
        }

    .ger td:has(.DateFilterTemplate_btnOpenFiltre):has(> span[gutype="GuLabel"]:not(:empty)) {
        gap: var(--space-8);
    }

.ger .RadWindow .RadGrid .rgFilterRow,
.ger .RadWindow .RadGrid .rgFilterRow > td {
    height: auto !important;
}

.ger .RadGrid td:has(.EvaluationEditButton),
.ger .RadGrid td:has(.EvaluationCommentButton) {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 0;
}

.ger .RadGrid .EvaluationEditButton,
.ger .RadGrid .btnCommentaire.EvaluationCommentButton {
    vertical-align: middle;
    padding: 0 !important;
    margin: 0;
    display: inline-block;
    line-height: normal;
}

    .ger .RadGrid .btnCommentaire.EvaluationCommentButton + .EvaluationEditButton,
    .ger .RadGrid .EvaluationEditButton + .btnCommentaire.EvaluationCommentButton {
        margin-left: var(--space-4);
    }

.ger .RadGrid .EvaluationEditButton {
    position: relative;
    top: 1px;
    line-height: normal;
}



.ger .RadGrid input.EvaluationEditButton[type="image"] {
    object-fit: contain;
}

.ger .RadGrid .btnCommentaire.EvaluationCommentButton {
    width: auto;
    min-width: 28px;
    text-align: center;
}

.RadGrid .rgMasterTable td,
.RadGrid .rgMasterTable th {
    vertical-align: middle !important;
}

    .RadGrid .rgMasterTable td:has(> input[type="image"].icon-action-lg) {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
        text-align: center !important;
        vertical-align: middle !important;
        overflow: visible;
    }


    .RadGrid .rgMasterTable td > input[type="image"].icon-action-lg {
        display: inline-flex !important;
        box-sizing: border-box !important;
        width: 28px !important;
        height: 28px !important;
        margin: 5px !important;
        border-radius: var(--radius-sm) !important;
        object-fit: contain;
        vertical-align: middle;
    }


        .RadGrid .rgMasterTable td > input[type="image"].icon-action-lg:hover {
            transform: none !important;
            box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent) !important;
        }

.ger .RadGrid.GridWithoutFrozenColumns {
    width: 100%;
}

    .ger .RadGrid.GridWithoutFrozenColumns .rgDataDiv {
        overflow-x: auto !important;
    }

    .ger .RadGrid.GridWithoutFrozenColumns :is(.rgHeaderDiv, .rgDataDiv) .rgMasterTable {
        width: 100% !important;
    }
    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow :is( input[type="text"], select, textarea, .RadInput, .RadPicker, .RadComboBox ) {
        min-width: 0;
        box-sizing: border-box;
    }

    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow > td {
        padding: var(--space-4) var(--space-4) !important;
        overflow: visible !important;
    }

    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow input.rgFilterBox,
    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow select.rgFilterBox,
    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow .filterCeg {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow input[type="text"],
    .ger .RadGrid.GridWithoutFrozenColumns .rgFilterRow select {
        display: block;
    }

    .ger .RadGrid.GridWithoutFrozenColumns .rgHeader {
        box-sizing: border-box;
        overflow: hidden !important;
        text-overflow: clip !important;
        height: auto !important;
        min-height: var(--space-40);
        line-height: 1.25;
        padding: var(--space-4) var(--space-4) !important;
        vertical-align: top !important;
        hyphens: auto;
    }


    .ger .RadGrid.GridWithoutFrozenColumns .rgHeaderDiv thead tr {
        height: auto !important;
    }

/* Notification.css - version finale sans fallback (utilise icones.css) */

.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess, .rgNoRecords td div) {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-sm);
}


.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess) {
    padding: var(--space-16) var(--space-16) var(--space-16) var(--space-64);
    border: 1px solid var(--notif-border);
    background-color: var(--notif-bg) !important;
    color: var(--notif-text);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    box-shadow: var(--shadow-1);
    margin-top: var(--space-8);
    --icon-content: "";
    --icon-family: var(--icon-family-solid);
    --icon-weight: var(--icon-weight-solid);
}

.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: var(--notif-accent);
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess)::after {
    content: var(--icon-content);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--icon-family);
    font-weight: var(--icon-weight);
    font-size: var(--icon-md-size);
    line-height: 1;
    width: var(--icon-md-size);
    text-align: center;
    color: var(--notif-accent);
}

.ger .infoMessageContentInfo {
    --notif-accent: var(--info);
    --notif-text: color-mix(in srgb, var(--info) 60%, var(--body-content) 40%);
    --notif-bg: color-mix(in srgb, var(--info) 12%, var(--body-content-bg) 88%);
    --notif-border: color-mix(in srgb, var(--info) 40%, var(--border-color) 60%);
    --icon-content: var(--icon-info);
}

/* ERROR */
.ger .infoMessageContentError,
.ger .infoFormulaireErrorShow {
    --notif-accent: var(--error);
    --notif-text: color-mix(in srgb, var(--error) 70%, var(--body-content) 30%);
    --notif-bg: color-mix(in srgb, var(--error) 14%, var(--body-content-bg) 86%);
    --notif-border: color-mix(in srgb, var(--error) 40%, var(--border-color) 60%);
    --icon-content: var(--icon-error);
}

/* SUCCESS */
.ger .infoMessageContentSuccess {
    --notif-accent: var(--success);
    --notif-text: color-mix(in srgb, var(--success) 70%, var(--body-content) 30%);
    --notif-bg: color-mix(in srgb, var(--success) 14%, var(--body-content-bg) 86%);
    --notif-border: color-mix(in srgb, var(--success) 40%, var(--border-color) 60%);
    --icon-content: var(--icon-success);
}

/* AIDE */
.ger .AideMessage {
    --notif-accent: var(--warning);
    --notif-text: color-mix(in srgb, var(--warning) 65%, var(--body-content) 35%);
    --notif-bg: color-mix(in srgb, var(--warning) 18%, var(--body-content-bg) 82%);
    --notif-border: color-mix(in srgb, var(--warning) 65%, var(--border-color) 35%);
    --icon-content: var(--icon-help);
    --icon-family: var(--icon-family-regular);
    --icon-weight: var(--icon-weight-regular);
}

.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess) ul {
    margin: 0;
    padding-left: 0;
}

.ger :where(.infoMessageContentInfo, .infoMessageContentError, .infoFormulaireErrorShow, .AideMessage, .infoMessageContentSuccess) li {
    margin: var(--space-2) 0;
}

.ger .rgNoRecords td div {
    margin: var(--space-8);
    padding: var(--space-12) var(--space-16) var(--space-12) var(--space-48);
    border: 1px dashed var(--disabled-border);
    background-color: color-mix(in srgb, var(--disabled-border) 24%, var(--body-content-bg) 76%);
    color: color-mix(in srgb, var(--body-content) 60%, var(--disabled-border) 40%);
}

.ger .rgNoRecords td div::after {
    content: var(--icon-search);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--icon-family-solid);
    font-weight: var(--icon-weight-solid);
    font-size: var(--icon-md-size);
    color: var(--disabled-border);
}

.ger .AideMessage ul:has(> li:only-child) {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.ger .AideMessage ul:has(> li:only-child) > li {
    padding-left: 0;
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Menu.css

   Ce fichier contient principalement les règles CSS pour :
   - telerik:RadMenu : .RadMenu / .rm*
   - navigation principale et sous-menus
   - éléments MegaMenu / menu applicatif si présents dans le markup

   Astuce :
   Rechercher .RadMenu, .rmRootGroup, .rmItem, .mega-menu.
   ========================================================================== */
.ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) {
    background: transparent;
    font-family: var(--font-family);
    color: var(--body-content);
}

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLevel1 {
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        box-shadow: var(--shadow-1);
        padding: 0;
        overflow: hidden;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsUL {
        display: flex;
        align-items: stretch;
        gap: 0;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLI {
        margin: 0;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 var(--space-16);
        white-space: nowrap;
        color: var(--component-header-content);
        text-decoration: none;
        background: transparent;
        border: 0;
        border-right: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent 25%);
        transition: background-color .15s ease, color .15s ease;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLI.rtsLast .rtsLink {
        border-right: 0;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsOut, .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsIn {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLink:not(.rtsDisabled):hover {
        background-color: color-mix(in srgb, var(--primary) 50%, white 50%) !important;
        color: var(--primary-contrast)
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) .rtsLink:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        position: relative;
        z-index: 2;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) a.rtsSelected {
        background-color: color-mix(in srgb, var(--primary) 80%, white 20%);
        font-weight: var(--font-weight-semibold);
        color: var(--primary-contrast) !important;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) :is(.rtsLink, .rtsOut, .rtsIn) {
        background-image: none !important;
    }

    .ger :is(.RadTabStrip, [class^="RadTabStrip_"], [class*=" RadTabStrip_"]) :is(.rtsNextArrow, .rtsPrevArrow) {
        width: var(--icon-md-size);
        height: var(--control-height);
        top: 0 !important;
        border-left: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent 25%);
        background: color-mix(in srgb, var(--component-header-background) 92%, white 8%);
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

.ger .SFWKTabContainer_TabStrip .rtsLevel .rtsLink:not(.rtsSelected):hover {
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--primary) 75%, transparent 25%) !important;
}

.ger .SFWKTabContainer_TabStrip .rtsLevel .rtsLink:not(.rtsSelected) .rtsOut {
    background-image: none !important;
    background-repeat: initial !important;
    background-position: initial !important;
    text-decoration: none;
}

.ger .SFWKTabContainer_TabStrip :is(.rtsNextArrow, .rtsPrevArrow, .rtsPrevArrowDisabled, .rtsNextArrowDisabled) {
    background-image: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    width: var(--icon-md-size) !important;
    height: var(--control-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent 25%) !important;
    background-color: color-mix(in srgb, var(--component-header-background) 92%, white 8%) !important;
    margin-top: var(--space-0);
}

.ger .SFWKTabContainer_TabStrip :is(.rtsPrevArrow, .rtsPrevArrowDisabled, .rtsNextArrowDisabled)::before {
    transform: rotate(135deg);
}

.ger .SFWKTabContainer_TabStrip :is(.rtsPrevArrowDisabled, .rtsNextArrowDisabled) {
    margin: 0;
    background-color: var(--disabled-bg) !important;
    width: var(--icon-md-size) !important;
    height: 100% !important;
    cursor: default;
}

.ger .SFWKTabContainer_TabStrip :is(.rtsNextArrow, .rtsPrevArrow) {
    background-image: none !important;
    margin: 0;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    width: var(--icon-md-size) !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent 25%) !important;
    background-color: color-mix(in srgb, var(--component-header-background) 92%, white 8%) !important;
}

.ger .SFWKTabContainer_TabStrip .rtsNextArrow::before,
.ger .SFWKTabContainer_TabStrip .rtsPrevArrow::before,
.ger .SFWKTabContainer_TabStrip .rtsNextArrowDisabled::before,
.ger .SFWKTabContainer_TabStrip .rtsPrevArrowDisabled::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid color-mix(in srgb, var(--component-header-content) 80%, transparent 20%);
    border-bottom: 2px solid color-mix(in srgb, var(--component-header-content) 80%, transparent 20%);
    transform: rotate(-45deg);
}

.ger .SFWKTabContainer_TabStrip :is(.rtsPrevArrow, .rtsPrevArrowDisabled)::before {
    transform: rotate(135deg);
}

.ger .SFWKTabContainer_TabStrip :is(.rtsNextArrow:hover, .rtsPrevArrow:hover) {
    background-color: var(--secondary) !important;
}
.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) {
    --panelbar-item-height: 40px;
    --panelbar-handle-width: 46px;
    font-family: var(--font-family);
    font-size: var(--font-sm);
    color: var(--body-content);
    border: none;
}

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpRootGroup {
        margin: 0;
        padding: 0;
        list-style: none;
        border: none;
    }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink {
        position: relative;
        display: flex;
        align-items: center;
        min-height: var(--panelbar-item-height);
        padding: 0 calc(var(--panelbar-handle-width) + var(--space-12)) 0 var(--space-16);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        background-color: var(--component-header-background) !important;
        background-image: none !important;
        color: var(--component-header-content);
        box-shadow: var(--shadow-1);
        cursor: pointer;
        overflow: hidden;
        transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
    }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink:hover {
            background-color: var(--component-header-hover-background) !important;
            color: var(--component-header-hover-content) !important;
            box-shadow: var(--shadow-2);
        }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink.rpSelected {
            background-color: var(--component-header-selected-background) !important;
            color: var(--component-header-selected-color) !important;
            border-color: color-mix(in srgb, var(--primary) 70%, black 30%);
        }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink.rpFocused {
            outline: none;
            box-shadow: var(--shadow-1), var(--focus-ring);
        }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink .rpText {
        flex: 1 1 auto;
        font-weight: 600;
        line-height: var(--line-height-tight);
        font-size: var(--font-label);
        color: var(--primary);
        padding: 0 !important;
    }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink .rpExpandHandle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: var(--panelbar-handle-width);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        padding: 0;
    }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink .p-icon {
        display: inline-block;
        font-size: var(--font-lg);
        line-height: 1;
        color: color-mix(in srgb, var(--primary) 90%, black 10%);
        transition: transform .15s ease, color .12s ease;
        align-content: center;
    }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink:hover .p-icon, .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem > .rpLink.rpRootLink.rpSelected .p-icon {
        color: var(--primary-contrast);
        align-content: center;
    }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpItem.rpExpanded > .rpLink .p-icon {
        transform: rotate(180deg);
    }


    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpTemplate {
        padding: var(--space-8);
        width: auto !important;
    }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpTemplate a {
            color: var(--primary);
            text-decoration: none;
        }

            .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpTemplate a:hover {
                text-decoration: underline;
            }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) :is(.rpRootLink, .rpRootLink:hover, .rpRootLink.rpSelected) {
        background-image: none !important;
    }


.ger .rpTemplate {
    margin: 0 !important;
}

.ger .RadPanelBar .rpLink.rpExpandable .rpExpandHandle:not(:has(.p-icon)) {
    pointer-events: none;
}

    .ger .RadPanelBar .rpLink.rpExpandable .rpExpandHandle:not(:has(.p-icon))::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid color-mix(in srgb, var(--primary) 85%, transparent 15%);
        border-bottom: 2px solid color-mix(in srgb, var(--primary) 85%, transparent 15%);
        transform: rotate(45deg);
        opacity: .95;
        transition: transform .15s ease, border-color .15s ease;
    }

.ger .RadPanelBar .rpLink.rpExpandable:hover .rpExpandHandle:not(:has(.p-icon)) {
    background: var(--component-header-hover-background);
}

    .ger .RadPanelBar .rpLink.rpExpandable:hover .rpExpandHandle:not(:has(.p-icon))::after {
        border-right-color: var(--component-header-hover-content);
        border-bottom-color: var(--component-header-hover-content);
    }

.ger .RadPanelBar .rpLink.rpExpandable.rpSelected .rpExpandHandle:not(:has(.p-icon)) {
    background: var(--component-header-selected-background);
}

    .ger .RadPanelBar .rpLink.rpExpandable.rpSelected .rpExpandHandle:not(:has(.p-icon))::after {
        border-right-color: var(--component-header-selected-content);
        border-bottom-color: var(--component-header-selected-content);
    }

.ger .RadPanelBar .rpItem.rpExpanded > .rpLink.rpExpandable .rpExpandHandle:not(:has(.p-icon))::after {
    transform: rotate(225deg);
}

.ger .SFWKActionBar_LeftCell {
    vertical-align: middle !important;
}

.ger .SFWKActionBar_RightCell {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    align-items:center;
}

.ger .SFWKActionBar_MainTable {
    padding: var(--space-4);
    width: 100%;
}

.ger .RadPanelBar .rpLink.rpExpandable.rpExpanded .rpExpandHandle:not(:has(.p-icon))::after {
    transform: rotate(225deg);
}

.ger .rtsLI {
    background-color: var(--secondary) !important;
}


.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
.rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink) {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--panelbar-item-height);
    padding: 0 calc(var(--panelbar-handle-width, 46px) + var(--space-12)) 0 var(--space-16);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--component-header-background) !important;
    background-image: none !important;
    color: var(--component-header-content);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    overflow: hidden;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
    padding-right: var(--space-12);
}

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
    .rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink):hover {
        background-color: var(--component-header-hover-background) !important;
        color: var(--component-header-hover-content) !important;
        box-shadow: var(--shadow-2);
        cursor:pointer !important;
    }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
        .rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink):hover span {
            color: var(--component-header-hover-content) !important;
        }

    .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
    .rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink).rpSelected {
        background-color: var(--component-header-selected-background) !important;
        color: var(--component-header-selected-color) !important;
        border-color: color-mix(in srgb, var(--primary) 70%, black 30%);
    }

        .ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
        .rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink).rpSelected span {
            color: var(--component-header-selected-color) !important;
        }

.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"]) .rpSlide {
    background: var(--body-content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1);
}



.ger .RadPanelBar .rpLink.rpExpandable.rpSelected
.rpExpandHandle:not(:has(.p-icon))::after {
    border-right-color: var(--component-header-selected-color);
    border-bottom-color: var(--component-header-selected-color);
}



.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
.rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink) .rpExpandHandle {
    position: absolute;
    right: var(--space-8);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: none;
}

.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
.rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink) .RadPanelHeaderCategorieTexte {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-sm);
}

.ger :is(.RadPanelBar, [class^="RadPanelBar_"], [class*=" RadPanelBar_"])
.rpItem > :is(.rpLink.rpRootLink, .rpHeaderTemplate.rpRootLink) .RadPanelHeaderCategorieImage {
    margin-left: auto;
}

.ger .RadPanelBar_Default .rpOut {
    border-bottom-style: none;
    border-bottom-width: 0;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) {
    font-family: var(--font-family);
    font-size: var(--font-md) !important;
    color: var(--body-content);
    min-width: 220px;
    background: var(--body-content-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-2) !important;
    padding: var(--space-8) !important;
    height: auto !important;
    max-height: none;
    overflow: visible !important;
}

.leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) {
    font-family: var(--font-family);
    font-size: var(--font-md) !important;
    color: var(--body-content);
    min-width: 220px;
}

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) :is(.rmGroup, .rmLevel1) {
        margin: 0 !important;
        padding: var(--space-8) !important;
        list-style: none !important;
        background: transparent !important;
        background-image: none !important;
    }

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmText {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        background-image: none !important;
    }

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .leftNavigationMenuItem {
        display: flex;
        align-items: center;
        gap: var(--space-8);
        min-height: var(--control-height);
        padding: 0 var(--space-12);
        border-radius: calc(var(--radius-sm) - 1px);
        border: 1px solid transparent;
        color: var(--body-content);
        background: transparent;
        transition: background-color .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
    }

        .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .leftNavigationMenuItem a {
            flex: 1 1 auto;
            min-width: 0;
            color: inherit;
            text-decoration: none;
            line-height: var(--line-height-normal);
            white-space: normal;
            word-break: break-word;
        }

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .leftNavigationMenuItemImageContainer {
        flex: 0 0 auto;
        width: var(--icon-md-size);
        height: var(--icon-md-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmItem:hover .leftNavigationMenuItem {
        background: var(--component-header-hover-background);
        color: var(--component-header-hover-content);
        border-color: color-mix(in srgb, var(--primary) 35%, transparent 65%);
    }

    .leftNavigationMenu:is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmItem:focus-within .leftNavigationMenuItem {
        outline: none;
        box-shadow: var(--focus-ring);
    }

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) > :is(.rmGroup.rmLevel1, .rmLevel1) {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
    height: auto !important;
    overflow: visible !important;
    top: 0 !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmSlide {
    overflow: hidden !important;
    width: max-content !important;
    min-width: 300px !important;
    height: auto !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmSlide > .rmGroup,
.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmLevel2 {
    width: max-content !important;
    min-width: 300px !important;
    height: auto !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context)
:is(.rmItem, .rmLink, .rmText, .rmToggle, .rmExpandRight, .rmLeftImage, .rmRightImage) {
    background: transparent !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmItem {
    margin: 0 !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmLink {
    padding: 0 var(--space-12) !important;
    border-radius: calc(var(--radius-sm) - 1px) !important;
    color: var(--body-content) !important;
    text-decoration: none !important;
    align-items: center !important;
    display: flex !important;
    vertical-align: middle;
    border: 0 !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmText {
    display: block;
    padding: 0 !important;
    margin: 0 !important;
    line-height: var(--line-height-normal);
    white-space: nowrap !important;
    overflow: visible;
    word-break: normal;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmLink:hover {
    background: var(--component-header-hover-background) !important;
    color: var(--component-header-hover-content) !important;
    border-color: color-mix(in srgb, var(--primary) 35%, transparent 65%) !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context)
:is(.rmSelected > .rmLink, .rmFocused > .rmLink, .rmExpanded > .rmLink) {
    background: var(--component-header-selected-background) !important;
    color: var(--component-header-selected-color) !important;
    border-color: color-mix(in srgb, var(--primary) 55%, black 45%) !important;
    font-weight: var(--font-weight-semibold);
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmLink:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) .rmSeparator {
    height: 1px;
    margin: var(--space-4) var(--space-8);
    background: color-mix(in srgb, var(--border-color) 70%, transparent 30%);
    border: 0 !important;
}





.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context)
:is(.rmItem, .rmLink, .rmText) {
    background-image: none !important;
    font-size: var(--font-sm) !important;
    min-height: var(--control-height);
    align-content: center;
}

.ger .rmItem:has(> .sousDomaineMenuItem),
.ger .sousDomaineMenuItem,
.ger .sousDomaineMenuItem .rmText {
    min-height: unset !important;
}
.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context)
:is(.rmSeparator) {
    min-height: var(--space-4) !important;
}



.cloee2
:is(.RadMenu.RadMenu_Context, .RadMenu_Context)
.rmLink:has(.rmText:empty) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) :is(.rmLink.rmDisabled, .rmDisabled > .rmLink, .rmItem.rmDisabled > .rmLink) {
    color: var(--disabled-text) !important;
    opacity: 0.9;
    cursor: not-allowed !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) :is(.rmLink.rmDisabled:hover, .rmDisabled > .rmLink:hover, .rmItem.rmDisabled > .rmLink:hover) {
    color: var(--disabled-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.ger :is(.RadMenu.RadMenu_Context, .RadMenu_Context) :is(.rmLink.rmDisabled, .rmDisabled > .rmLink, .rmItem.rmDisabled > .rmLink) .rmText {
    color: inherit !important;
}
.ger .RadPanelContentImageLink {
    vertical-align: middle;
}
.ger .rtsPrevArrowDisabled,
.ger .rtsNextArrowDisabled {
    opacity: 1 !important;
    filter: none !important;
    background-color: var(--surface-color, #f3f3f3) !important;
    background-image: none !important;
    cursor: default;
}

.ger .rtsPrevArrowDisabled::before,
.ger .rtsNextArrowDisabled::before {
    opacity: 0.4;
    cursor: default;
}
/* ==========================================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharter/Components/Popup.css

   Ce fichier contient principalement les règles CSS pour :
   - popups / fenêtres applicatives custom : .popup-*
   - contenu interne des fiches d'information popup
   - mise en page responsive des fenêtres de détail

   Remarque :
   Les surcharges spécifiques Telerik RadWindow historiques peuvent aussi exister
   dans d'autres fichiers comme guTelerikOverwrite.css.
   ========================================================================== */
/* Règles CSS pour les popups / fenêtres applicatives custom */


.ger .popup-container {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    color: var(--body-content);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    background-color: var(--body-bg);
    text-align: left;
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - 24px);
    box-sizing: border-box;
    max-width: 1500px;
}
.ger .popup-header {
    background: -webkit-linear-gradient(left, color-mix(in srgb, var(--primary) 80%, white 20%) 35%, color-mix(in srgb, var(--primary) 50%, white 50%) ) !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--primary-contrast);
    padding: var(--space-8) var(--space-8) var(--space-4) var(--space-8);
    margin: 0;
    cursor: default;
}

.ger .popup-container > div {
    width: 100%;
    max-height: inherit;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

.ger .popup-content {
    padding: var(--popup-container-padding);
    overflow: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 84px) !important;
    box-sizing: border-box;
}

    .ger .popup-content .infoPopup {
        width: 100%;
        min-width: min(940px, 100%);
    }

    .ger .popup-content .infoPopup__stack {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

.ger .popup-container > div > .fa-circle-xmark.icon-action {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 2;
    width: var(--icon-action-box-md) !important;
    height: var(--icon-action-box-md) !important;
    font-size: 26px !important;
    color: var(--primary) !important;
    background-color: white !important;
    border-radius: 50%;
    box-shadow: var(--shadow-2);
}

.ger .popup-content .infoPopup__row {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ger .popup-content .infoPopup .label {
    margin-right: 0;
}

    .ger .popup-content .infoPopup .label > label {
        display: inline-block;
        margin-bottom: var(--space-6);
        white-space: normal;
    }

.ger .popup-content .infoPopup .field {
    margin-bottom: var(--space-12) !important;
    min-width: 0;
}

    .ger .popup-content .infoPopup .field > .TextReadOnly {
        width: 100%;
        min-width: 0;
    }

.ger .popup-content .infoPopup__userRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-12);
    align-items: start;
    margin-bottom: var(--space-12);
}

    .ger .popup-content .infoPopup__userRow > .field {
        margin-bottom: 0 !important;
    }

.ger .popup-content .infoPopup__admin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

    .ger .popup-content .infoPopup__admin > input[type="checkbox"] {
        margin: 0;
        flex: 0 0 auto;
    }

    .ger .popup-content .infoPopup__admin > .TextReadOnly {
        width: auto;
        min-width: 132px;
        justify-content: flex-start;
    }

.ger .popup-content .infoPopup__card {
    min-width: 0;
}

.ger .popup-content .infoPopup__title {
    margin: var(--space-16) 0 var(--space-8) 0;
    color: var(--primary);
    font-size: var(--line-height-tight);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.ger .popup-content .infoPopup__card .field:last-child {
    margin-bottom: 0 !important;
}

.ger .popup-content .infoPopup .isCode {
    font-size: var(--font-xs);
    word-break: break-all;
    white-space: normal;
}

@media (max-width: 900px) {
    .ger .popup-content .infoPopup {
        min-width: 0;
    }

    .ger .popup-content .infoPopup__userRow,
    .ger .popup-content .infoPopup__archis {
        grid-template-columns: 1fr;
    }

    .ger .popup-content .infoPopup__admin > .TextReadOnly {
        min-width: 0;
        width: 100%;
    }
}

.ger :is(.popup-content input[type="button"], .rwPopupButton) {
    justify-content: center;
    padding: var(--space-4) var(--space-16) !important;
    border: 1px solid var(--border-color);
    font-family: var(--font-family) !important;
    line-height: var(--line-height) !important;
    gap: var(--space-8);
}

.ger .rwDialogText .rwPopupButton {
    cursor: pointer !important;
}

.ger .WindowPopupBody {
    padding: var(--popup-container-padding);
    background-color: var(--body-sub-bg);
}

.ger .RadWindow .rwPopupButton,
.ger .RadWindow .rwPopupButton span {
    cursor: pointer !important;
}
.ger .popup-container .PopupFiltreDate tr.FiltreAlt:last-child > td {
    padding-top: 24px;
}
.ger .tablePopupFiltreDate .RadPicker {
    width: 120px !important;
}

.ger .RadNotification {
    font-family: var(--font-family);
    font-size: var(--font-sm);
    line-height: var(--line-height-normal);
    color: var(--body-content);
    background: var(--body-content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    height: auto !important;
    overflow: hidden;
}

    .ger .RadNotification .rnTitleBar {
        background: var(--primary);
        color: var(--primary-contrast);
        padding: var(--space-8) var(--space-12);
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }

    .ger .RadNotification .rnTitleBarIcon img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1);
        display: block;
    }

    .ger .RadNotification .rnCommands {
        margin-left: auto;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
    }

    .ger .RadNotification .rnCloseIcon a::before {
        content: none !important;
    }

    .ger .RadNotification .rnCloseIcon a {
        border-radius: var(--radius-sm);
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(WebResource.axd?d=YNPAXKT5kjQT_znbSVdbV1KsOU68OGeVNAjFOG4fiiJNWMY87j7XURy6Z9-fEveq7PvkEKVWYqC596MOc5VfXyDgs_7PTKJ-JQWdlQYRmlMZlCwpbG5RVCLVV0zM4Y2iyCadJDQCH7WBb6rAeOH3ZUOMUEkwS_h9QYv4XHltcxA1&t=638804055800000000);
    }

        .ger .RadNotification .rnCloseIcon a:hover {
            background-color: color-mix(in srgb, white 20%, transparent);
        }

    .ger .RadNotification .rnContentWrapper {
        width: auto !important;
        padding: var(--space-12);
        background: var(--body-sub-bg);
        display: grid;
        grid-template-columns: 20px 1fr;
        column-gap: var(--space-8);
        align-items: start;
    }

    .ger .RadNotification .rnContentIconClipIn,
    .ger .RadNotification .rnContentIconClip {
        overflow: visible !important;
        width: 20px;
        height: 20px;
    }

        .ger .RadNotification .rnContentIconClip img {
            display: block;
        }

    .ger .RadNotification .rnContent {
        white-space: normal;
        overflow: visible;
    }

.RadWindow .rwTable,
.RadWindow .rwTitlebarControls,
.RadWindow .rwControlButtons,
.RadWindow .rwDialogPopup table {
    border-spacing: 0 !important;
    border-collapse: separate;
}
.ger .popup-info {
    gap: var(--space-16);
}

    .ger .popup-info .label {
        margin-bottom: var(--space-4);
    }

    .ger .popup-info .field {
        margin-bottom: var(--space-8);
    }

    .ger .popup-info .architecture-grid {
        margin-top: var(--space-12);
        gap: var(--space-24);
    }

.ger .infoPopup__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ger .infoPopup__row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ger .infoPopup__userRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-12);
}

.ger .infoPopup__archis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
    margin-top: var(--space-12);
}

.ger .infoPopup__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ger .infoPopup__title {
    margin: 0 0 var(--space-4) 0;
}

.ger .infoPopup .label {
    margin-bottom: 0;
}

.ger .infoPopup .field {
    margin-bottom: 0;
}

.ger .WindowPopupBody .field > span[gutype="GuDropDownList"] > select {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* 2) Sécuriser aussi les autres contrôles de champ dans les popups */
.ger .WindowPopupBody .field {
    min-width: 0;
}

.ger .WindowPopupBody td {
    min-width: 0;
}

/* 3) Le span vide généré après les checkboxes ne doit pas prendre de place */
.ger .WindowPopupBody input[type="checkbox"] + span:empty {
    display: none;
    margin: 0 !important;
}

/* 4) Optionnel : pour les colonnes checkbox, garder un contenu compact */
.ger .WindowPopupBody td .field > input[type="checkbox"] {
    flex: 0 0 auto;
}


/* Popup contenant des tables de formulaires compactes :
   laisser les valeurs longues revenir à la ligne pour ne pas élargir le container parent. */
.ger .WindowPopupBody table .field > .TextReadOnly {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* =========================================================
   FIX BOUTON Telerik RadAlert / RadConfirm / RadPrompt
   ========================================================= */

.ger .RadWindow .rwDialogPopup > div:last-child,
.RadWindow .rwDialogPopup > div:last-child {
    margin-top: 12px;
    text-align: center;
}

.ger .RadWindow .rwPopupButton,
.RadWindow .rwPopupButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    min-height: var(--control-height, 28px) !important;
    padding: 4px 16px !important;
    border: 1px solid var(--border-color, #8ea3b5) !important;
    border-radius: var(--radius-sm, 3px) !important;
    background: var(--tertiary, #e8f1f8) !important;
    color: var(--body-content, #1f2d3d) !important;
    font-family: var(--font-family, Arial, sans-serif) !important;
    font-size: var(--font-sm, 12px) !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: var(--shadow-1, none) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.ger .RadWindow .rwPopupButton .rwOuterSpan,
.ger .RadWindow .rwPopupButton .rwInnerSpan,
.RadWindow .rwPopupButton .rwOuterSpan,
.RadWindow .rwPopupButton .rwInnerSpan {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.ger .RadWindow .rwPopupButton:hover,
.RadWindow .rwPopupButton:hover {
    background: var(--component-header-hover-background, #d7e8f5) !important;
    border-color: var(--component-header-hover-background, #d7e8f5) !important;
    color: var(--component-header-selected-color, #163247) !important;
}

.ger .RadWindow .rwPopupButton:active,
.RadWindow .rwPopupButton:active {
    opacity: 0.95 !important;
}
.RadWindow .rwWindowContent .rwPopupButton:hover .rwInnerSpan {
    background-position: 0 -199px;
    padding: 0 12px;
    color: var(--primary-contrast) !important;
}
/* =========================================================
   Telerik RadAlert - icône FontAwesome + bouton à droite
   ========================================================= */

.ger .RadWindow .rwDialogPopup.radalert,
.RadWindow .rwDialogPopup.radalert {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 14px;
    align-items: center;
    padding: 18px 20px 14px 20px !important;
    margin: 0 !important;
    background: none !important;
    background-image: none !important;
    box-sizing: border-box;
}

.ger .RadWindow .rwDialogPopup.radalert::before,
.RadWindow .rwDialogPopup.radalert::before {
    content: var(--info-alert);
    grid-column: 1;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 28px;
    font-family: var(--icon-family-solid);
    font-weight: var(--icon-weight-solid);
    font-size: var(--icon-lg-size);
    line-height: 1;
    color: var(--warning);
}

.ger .RadWindow .rwDialogPopup.radalert .rwDialogText,
.RadWindow .rwDialogPopup.radalert .rwDialogText {
    grid-column: 2;
    grid-row: 1;
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    align-self: center;
}

.ger .RadWindow .rwDialogPopup.radalert .rwDialogText::before,
.RadWindow .rwDialogPopup.radalert .rwDialogText::before {
    content: none !important;
}

.ger .RadWindow .rwDialogPopup.radalert > div:last-child,
.RadWindow .rwDialogPopup.radalert > div:last-child {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
    text-align: right !important;
}
/* ============================================================
   DOCUMENTATION COMPOSANT
   Fichier : GraphicCharterOverride.CSS
   Documentation des surcharges transverses et correctifs visuels.

   Composants / zones couverts dans ce fichier :
   - textarea natif HTML
   - Zones de layout global : #top_content, #content_haut,
     #arrondihaut_top, #domaine, #utilisateur, #aide
   - Barre d'action SFWK : .SFWKActionBar_MainTable
   - Liens natifs HTML : a:active
   - Zone de contexte m�tier : #infoPanel, #contexte_de_travail
   - Telerik RadComboBox dans le contexte g�n�ral
   - Telerik RadGrid : filtres d'en-t�te, lignes s�lectionn�es,
     boutons d'�valuation / commentaire
   - Moteur de recherche / mega menu : .mega-menu-search, #txtSearch
   - RepeaterWA : .actions, .contenu, blocs gauche/centre/droite
   - Overlay / popup : .voilePourPopup
   - Tableau de bord m�tier : .TableauBord_*
   - Liens de service : a.gu_servicelink

   Remarque :
   Ce fichier contient principalement des overrides de mise en page,
   de structure visuelle et des adaptations cibl�es pour des �crans
   m�tiers existants.
   ============================================================ */
textarea {
    height:auto 
}
.ger #top_content {
    background: -webkit-linear-gradient(left, #ffffff 45%, var(--secondary)) !important;
    border-color: var(--secondary);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}
.ger #content_haut {
    background: -webkit-linear-gradient(left, color-mix(in srgb, var(--primary) 80%, white 20%) 35%, color-mix(in srgb, var(--primary) 50%, white 50%)) !important;
}
.ger .SFWKActionBar_MainTable {
    background: linear-gradient( to right, color-mix(in srgb, var(--primary) 70%, white 30%), color-mix(in srgb, var(--primary) 55%, white 45%) ) !important;
}
.ger a:active {
    color: var(--primary);
    opacity: 0.75;
}
.ger #contexte_de_travail {
    font-size:var(--font-sm);
}
    .ger #contexte_de_travail a {
        margin-right:4px;
    }
.ger #infoPanel #infoPanel_annee_scolaire, .ger #infoPanel .contexte_general_infos_ecole_centre {
    height: auto !important;
}

    .ger #infoPanel #infoPanel_info_base, .ger #infoPanel .contexte_general_infos_ecole_centre:last-of-type {
        margin-bottom: 0 !important;
    }

.ger #infoPanel .RadComboBox > table {
    border-color: var(--input-border);
    border-radius: var(--radius-sm) !important;
}

.ger #infoPanel .RadComboBox .rcbInput {
    box-sizing: border-box !important;
}


.ger .rgHeaderFilters {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    flex-wrap: wrap;
    vertical-align: central !important;
}
.ger .rgHeaderFilterItem {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

    .ger .rgHeaderFilterItem label {
        line-height: 1;
        white-space: nowrap;
    }
.ger #arrondihaut_top {
    background-color: var(--secondary);
}

.ger #utilisateur {
    position: absolute;
    right: var(--space-16);
    bottom: var(--space-8);
    float: none;
    top: auto;
    display: flex;
    align-items: center;
    margin: 0;
    max-width: 220px;
}
.ger #aide {
    float: none;
    width: auto;
    position: absolute;
    right: 175px;
}
.ger .mega-menu-search {
    padding: var(--space-8);
}
.ger #txtSearch {
    margin-left: var(--space-8);
    height: var(--control-height);
    min-height: var(--control-height);
    max-height: var(--control-height);
}
.ger #spanSearch {
    vertical-align: middle;
    margin-left: var(--space-8);
}
.ger .actions {
    display: inline-table;
    width: -webkit-fill-available;
}

.ger .RepeaterWA .actions {
    background-color: var(--secondary) !important;
    border: 1px solid #5d7b94;
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--control-height);
    height: auto;
    padding: var(--space-4) var(--space-8);
    box-sizing: border-box;
}

.ger #domaine_logo input[type=image] {
    width: 80px !important;
    height: 80px !important;
}


.ger .voilePourPopup {
    position: fixed;
    inset: 0;
    z-index: 4099;
    background: linear-gradient( 180deg, color-mix(in srgb, var(--primary) 9%, transparent), color-mix(in srgb, var(--primary) 4%, transparent) );
    background-color: color-mix( in srgb, var(--body-content) 65%, transparent );
    backdrop-filter: blur(1px) saturate(110%);
    -webkit-backdrop-filter: blur(1px) saturate(110%);
    transition: opacity 220ms ease-out, backdrop-filter 220ms ease-out;
}



.ger .RepeaterWA .actionsLeft,
.ger .RepeaterWA .actionsCenter,
.ger .RepeaterWA .actionsRight {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: var(--control-height);
}

.ger .RepeaterWA .actionsLeft {
    justify-content: flex-start;
    flex: 1 1 0;
}

.ger .RepeaterWA .actionsCenter {
    justify-content: center;
    flex: 0 0 auto;
}

.ger .RepeaterWA .actionsRight {
    justify-content: flex-end;
    flex: 1 1 0;
}

.ger td.linkTableauBordRight a.gu_servicelink {
    display: inline-block;
    color: var(--primary);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color .15s ease, text-decoration-color .15s ease;
}

    .ger td.linkTableauBordRight a.gu_servicelink > span {
        color: inherit;
        text-decoration: none;
    }

    .ger td.linkTableauBordRight a.gu_servicelink:hover {
        color: color-mix(in srgb, var(--primary) 85%, black 15%);
        text-decoration-thickness: 2px;
    }

    .ger td.linkTableauBordRight a.gu_servicelink:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-radius: var(--radius-sm);
    }
.ger .TableauBord_Container,
.ger .TableauBord_Container_College {
    --tb-left-w: 120px;
    --tb-subcol-w: 50px;
    --tb-col-w: calc(var(--tb-subcol-w) * 2);
    --tb-row-h: 22px;
    --tb-pad-x: var(--space-4, 4px);
    overflow-x: auto;
}

.ger .TableauBord_FirstPart {
    display: flex;
    align-items: stretch;
    padding-left: var(--space-12, 12px);
}

.ger .TableauBord_TableLeft {
    width: var(--tb-left-w);
    height: 100%;
    flex: 0 0 var(--tb-left-w);
}

.ger .TableauBord_rpFirstPart {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding-left: var(--space-12, 12px);
}

.ger .TableauBord_TableRight {
    flex: 0 0 auto;
    margin-left: var(--space-16) !important;
}

.ger .TableauBord_rpFirstPart table,
.ger .TableauBord_rpSecondPart table,
.ger .TableauBord_TableLeft,
.ger .TableauBord_TableRight {
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed;
}

.ger .TableauBord_rpFirstPart > table {
    width: var(--tb-col-w) !important;
    min-width: var(--tb-col-w) !important;
    max-width: var(--tb-col-w) !important;
    flex: 0 0 var(--tb-col-w);
    margin: 0;
}

    .ger .TableauBord_rpFirstPart > table th,
    .ger .TableauBord_rpFirstPart > table td {
        width: var(--tb-subcol-w) !important;
        max-width: var(--tb-subcol-w) !important;
        padding-left: var(--tb-pad-x);
        padding-right: var(--tb-pad-x);
        overflow: hidden;
        white-space: nowrap;
    }

.ger .TableauBord_rpFirstPart tr,
.ger .TableauBord_TableRight tr {
    height: var(--tb-row-h);
}

.ger td.TableauBord_Cell_Vide {
    width: auto;
}

.ger .TableauBord_TableLeft > tbody > tr > td.TableauBord_Cell_Vide {
    height: 55px;
}

.ger .TableauBord_TableRight > tbody > tr > td.TableauBord_Cell_Vide {
    height: 123px;
}

.ger .TableauBord_TableRight > tbody > tr > td.TableauBord_Header_Total {
    border-left: 0;
    width: 26px;
    font-weight: var(--font-weight-bold) !important;
}
.ger .TableauBord_Header_Total span {
    border-left: 0;
    width: 26px;
    font-weight: var(--font-weight-bold) !important;
}
.ger .TableauBord_rpSecondPart {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: var(--space-12);
    padding-left: var(--space-24);
}

    .ger .TableauBord_rpSecondPart > table:first-child {
        width: var(--tb-left-w);
        min-width: var(--tb-left-w);
        max-width: var(--tb-left-w);
        flex: 0 0 var(--tb-left-w);
        margin: 0;
    }

        .ger .TableauBord_rpSecondPart > table:first-child > tbody > tr > td.TableauBord_Cell_Vide {
            width: var(--tb-left-w);
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
        }

    .ger .TableauBord_rpSecondPart .TableauBord_SecondPart {
        width: var(--tb-col-w) !important;
        min-width: var(--tb-col-w) !important;
        max-width: var(--tb-col-w) !important;
        flex: 0 0 var(--tb-col-w);
        display: block;
    }

        .ger .TableauBord_rpSecondPart .TableauBord_SecondPart table {
            width: var(--tb-col-w) !important;
            table-layout: fixed !important;
        }

        .ger .TableauBord_rpSecondPart .TableauBord_SecondPart td.TableauBord_Cell_SecondPart {
            width: var(--tb-subcol-w) !important;
            max-width: var(--tb-subcol-w) !important;
            padding-left: 0;
            padding-right: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.ger .TableauBord_TableLeft td,
.ger .TableauBord_TableRight td {
    padding-left: var(--tb-pad-x);
    padding-right: var(--tb-pad-x);
    vertical-align: middle;
}

.ger .TableauBord_LivretSuivi {
    white-space: nowrap;
    min-width: 77px;
}

.ger  #tbTableauBord_panChoixCllProjetee {
    margin-bottom: var(--space-24);
}

.ger .TableauBord_Container {
    background: var(--body-sub-bg);
}

.ger .divEnteteTableauDeBord {
    background: -webkit-linear-gradient(left, color-mix(in srgb, var(--primary) 80%, white 20%) 35%, color-mix(in srgb, var(--primary) 50%, white 50%)) !important;
}
    .ger .divEnteteTableauDeBord span {
        color: var(--primary-contrast) !important;
    }

.ger .RepeaterWA .contenu {
    margin-top: var(--space-12);
    padding: var(--form-container-padding);
    border: 1px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.06));
    border-bottom: 0;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    --control-height: 34px;
    --control-padding-y: 6px;
    --control-padding-x: 10px;
}

    .ger .RepeaterWA .contenu > table.TableForRepeater {
        border-collapse: separate;
        border-spacing: 0;
    }

        .ger .RepeaterWA .contenu > table.TableForRepeater > tbody > tr > td + td {
            padding-left: var(--space-12);
        }

.noWrapCell {
    white-space: nowrap;
}



.ger .RepeaterWA .contenu table table td {
    vertical-align: top;
    padding-top: var(--space-4, 4px);
}
.ger .AnneePasCourante .rcbReadOnly .rcbInput {
    color: var(--error) !important;
}
.ger .RadGrid :is(.rgSelectedRow, .rgActiveRow) .btnCommentaire.EvaluationCommentButton {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--component-header-selected-color) 75%, transparent) !important;
    color: var(--component-header-selected-color) !important;
    box-shadow: none !important;
}

    .ger .RadGrid :is(.rgSelectedRow, .rgActiveRow) .btnCommentaire.EvaluationCommentButton:hover {
        background: color-mix(in srgb, var(--component-header-selected-color) 18%, transparent) !important;
        border-color: var(--component-header-selected-color) !important;
        color: var(--component-header-selected-color) !important;
    }

.ger .RadGrid :is(.rgSelectedRow, .rgActiveRow) .EvaluationEditButton {
    filter: brightness(0) invert(1) contrast(1.1);
}

    .ger .RadGrid :is(.rgSelectedRow, .rgActiveRow) .EvaluationEditButton:hover {
        filter: brightness(0) invert(1) contrast(1.25);
    }
.CegPhoneTextBoxHideCross span {
    display: inline-flex;
    vertical-align:central;
}
    .CegPhoneTextBoxHideCross span span {
        vertical-align: central;
        align-self:center;
    }

.ger .AlignControls > span:has(.CegPickerButtonDelete, .CegPickerButtonPicker) {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-4);
    vertical-align: middle;
}

    .ger .AlignControls > span:has(.CegPickerButtonDelete, .CegPickerButtonPicker) > input[type="submit"] {
        margin: 0 !important;
    }

    .ger .AlignControls > span:has(.CegPickerButtonDelete, .CegPickerButtonPicker) > img[id$="_imageInfo"] {
        padding: 0 !important;
        margin-left: var(--space-4);
        object-fit: contain;
    }

/* CSS GRILLE DES PROJECTIONS */

.ger .GroupeGrid_hautDroiteTablePanel table,
.ger .GroupeGrid_basDroiteTablePanel table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.ger .GroupeGrid_hautDroiteTablePanel td,
.ger .GroupeGrid_basDroiteTablePanel td {
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_classe_proj,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter_Ls,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter_NbPers,
.ger .GroupeGrid_basDroiteTablePanel .GroupeGrid_radioButtonCell {
    min-width: 90px !important;
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Header_fm,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter {
    min-width: 45px !important;
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_classe_proj {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    text-align: center;
    font-size: var(--font-xs);
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Header_fm,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_classe_proj,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter_Ls,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_Counter_NbPers,
.ger .GroupeGrid_basDroiteTablePanel .GroupeGrid_radioButtonCell {
    border-left: 0 !important;
    box-shadow: inset 2px 0 0 rgb(218, 226, 232);
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_niveau_separate,
.ger .GroupeGrid_basDroiteTablePanel .GroupeGrid_niveau_separate {
    border-left: 0 !important;
    box-shadow: inset 2px 0 0 rgb(152, 172, 191) !important;
}

.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_branche_separate,
.ger .GroupeGrid_basDroiteTablePanel .GroupeGrid_branche_separate,
.ger .GroupeGrid_hautDroiteTablePanel .GroupeGrid_brancheHeader_separate {
    border-left: 0 !important;
    box-shadow: inset 4px 0 0 rgb(152, 172, 191) !important;
}

.ger .GroupeGrid_basDroiteTablePanel .GroupeGrid_radioButtonCell {
    text-align: center;
    vertical-align: middle;
    padding-top: 3px !important;
}

.ger .GroupeGrid_basDroiteTablePanel input[type="radio"] {
    margin: 0 !important;
}

.ger .GroupeGrid_basGaucheTablePanel tr,
.ger .GroupeGrid_basGaucheTablePanel td {
    height: 24px;
    min-height: 24px;
    max-height: 24px;
    line-height: 24px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    vertical-align: middle !important;
    align-items:center;
    align-content:center;
}

.ger .GroupeGrid_basGaucheTablePanel input[type="image"].icon-lg,
.ger .GroupeGrid_basGaucheTablePanel img.icon-sm {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    padding: 0 !important;
    margin: 0 auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-items: center;
}

.ger .OptionGrid_alternateItemRow {
    background-color: color-mix(in srgb, var(--secondary) 35%, var(--tertiary) 65%);
}

.ger .OptionGrid_ItemRow {
    background-color: color-mix(in srgb, var(--secondary) 60%, var(--tertiary) 40%);
}

.ger .OptionGrid_RowError {
    background-color: color-mix(in srgb, var(--error) 18%, var(--tertiary) 82%) !important;
}

span.OptionGrid_error {
    color: red;
    display: table;
}

td.OptionGrid_error {
    background-color: color-mix(in srgb, var(--error) 40%, var(--tertiary) 60%) !important;
}