@font-face {
    font-family: "Montserrat";
    /*src: url("/assets/font/Chalkduster.ttf");*/
    src: url("/assets/font/Montserrat-Regular.ttf");
    /*src: url("/assets/font/Montserrat-Regular.ttf") format('truetype');*/
}

a.clean {
    color: inherit;
}
a.clean:hover {
    color: inherit;
    text-decoration: none;
}

.modalCustomTitle {
    text-align: center;
    font-weight: bold;
    width: 100%;
    font-size:1.3rem;
}

.modalCustomBody {
    text-align: center;
    width: 100%;
    font-size:1.0rem;
    background-color: #0a0d13;
}

.modalContentCustom {
    background-color: #0a0d13 !important;
}

.hrCustom {
    color: #979797;
    width: 92%;
}

.link {
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: normal;

    text-decoration: underline;
}

.linkUnSelected {
    text-decoration: none;
    color: #dddddd;
    font-size: 1.0rem;
    font-weight: normal;
}

.linkUnSelected:hover {
    text-decoration: underline;
    color: #ffd700;
    /*background-color: rgba(255, 215, 0, 0.08);*/
    /*border-left-color: #ffd700;*/
}

.linkSubTitle {
    color: #ffffff;
    font-size: 1.0rem;
    font-weight: normal;
    margin-bottom: 10px;
}

.linkSpace {
    margin-bottom: 10px;
}

.linkColor {
    color: #69AAD4;
    font-size: 1.0rem;
    font-weight: normal;
}

.textMenu {
    color: #1d1d1d;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.textMenuUnSelected {
    color: #1d1d1d;
    font-size: 1.1rem;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

.cardRef {
    margin-top: 10px;
    margin-bottom: 10px;

    width: 100%;
    max-width: 800px;

    min-height: 180px;

    /*background-color: #FFFFFF;*/
    /*border-color: #fcfcfc;*/
    /*border-width: 1px;*/
    /*border-radius: 6px;*/
}

.cardTitle {
    font-size: 1.2rem;
    font-weight: bold;
    color: #252525;
}

.cardRemoveDiv1 {
}
.cardRemoveDiv2 {
}


.butColorMini {
    display: inline-block;
    background: #e7b45a;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butColorMiniIn {
    min-width: 88px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #17202d;

    background: #e7b45a;
    padding: 2px 9px 2px 9px;
    margin: 2px 1px 2px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.butColorMini2 {
    position: relative;
    display: inline-block;
    background: #e7b45a;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butColorMini2In {
    min-width: 88px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #17202d;

    background: #e7b45a;
    padding: 2px 9px 2px 9px;
    margin: -2px 1px 0px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.butColorMiniGreen {
    display: inline-block;
    background: #ffba59;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butColorMiniGreenIn {
    min-width: 88px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #FFFFFF;

    background: #ffba59;
    padding: 2px 9px 2px 9px;
    margin: 2px 1px 2px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.butLanding {
    display: inline-block;
    background: #e7b45a00;
    border-radius: 26px;
    border: 2px solid #FFFFFF;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butLandingIn {
    min-width: 120px;
    text-align: center;
    text-transform: none;
    border-radius: 26px;

    font-size: 1.2rem;
    font-weight: normal;
    color: #FFFFFF;

    background: #e7b45a00;
    padding: 10px 10px 10px 10px;
    margin: 2px 1px 2px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.butLandingInWait {
    min-width: 120px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #F7F9FB;

    background: #e7b45a00;
    padding: 10px 10px 10px 10px;
    margin: 2px 1px 2px 1px;
}

.butColor {
    display: inline-block;
    background: #e7b45a;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butColorRed {
    display: inline-block;
    background: #FF0000;
    border-radius: 12px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.butColorIn {
    min-width: 120px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #17202d;

    background: #e7b45a;
    padding: 2px 9px 2px 9px;
    margin: 2px 1px 2px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; 
}

.butColorInRed {
    min-width: 120px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #FFFFFF;

    background: #FF0000;
    padding: 2px 9px 2px 9px;
    margin: 2px 1px 2px 1px;

    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.butColorInWait {
    min-width: 120px;
    text-align: center;
    text-transform: none;
    border-radius: 12px;

    font-size: 0.9rem;
    font-weight: normal;
    color: #17202d;

    background: #e7b45a;
    padding: 2px 9px 2px 9px;
    margin: 2px 1px 2px 1px;
}

.butUnderline {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration-line: underline;
    color: #e7b45a;

    padding: 8px 8px 7px 8px;

    cursor: pointer;
}

.butSpinnerWait {
    width:15px;
    height:15px;
    margin-right:5px;
    vertical-align:top;
    margin-top:3px;
}

.title {
    font-size: 1.3rem;
    /*font-weight: bold;*/
    color: #ffffff;

    margin-top: 20px;
    margin-bottom: 10px;
}

.titleCenter {
    font-size: 1.3rem;
    /*font-weight: bold;*/
    color: #ffffff;

    margin-top: 20px;
    margin-bottom: 10px;

    text-align: center;
}

.subTitle {
    font-size: 1.0rem;
    /*font-weight: bold;*/
    color: #ffffff;

    margin-top: 20px;
    margin-bottom: 20px;
}

.textInfo {
    font-size: 0.875rem;
    font-weight: normal;
    color: #afbacd;

    margin-top: 10px;
    margin-bottom: 10px;
}

.space {
    height: 20px;
}

.cardCross {
    font-size:1.5rem;
    cursor:pointer;
    float:right;
    margin-top:-5px;
}

.formBoxCenterFather {
    text-align: center;

    margin-top: 80px;
}

.formBox {
    max-width: 500px!important;
}

.formBoxCenter {
    max-width: 500px!important;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.formBoxCenterPopup {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.formTwoColLeft {
    max-width: 500px!important;
    margin-right: auto;
    text-align: left;
}

.formTwoColRight {
    max-width: 500px!important;
    margin-right: auto;
    text-align: left;
}

.bodyLayout {
    min-height: calc(100vh - 65px);
}

.footerBox {
    background-color: #FFFFFF;
    /*padding: 20px 0px 20px 0px;*/
    /*height: 64px;*/
    height: 0px;
}

.footerBoxLink {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    font-size: 1.0rem;
    font-weight: normal;
    color: #FFFFFF;
}

.footerLink {
    padding: 0 10px;
    text-decoration: none;
    font-size: 1.0rem;
    font-weight: bold;
    color: #FFFFFF;
    transition: color 0.3s;
}

.footerLink:hover {
    color: #FFFFFF;
}

.footerLinkBorder {
    border-left: 1px solid #ccc;
    margin-left: 10px;
}

.footerSpace {
    font-size: 1.0rem;
    font-weight: bold;
    color: #252525;
    margin: 0 20px;
    display: inline-block;
}

.labelBox {
    display: inline-block;
    vertical-align: top;

    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}
.labelName {
    font-size: 1.0rem;
    font-weight: bold;
    text-align: left;
    color: #000000;
}
.labelValue {
    font-size: 1.0rem;
    font-weight: normal;
    text-align: left;
    color: #212529;
}

div.back {
    margin-top: 10px;
    margin-bottom: 10px;
}
a.back {
    font-size: 1.0rem;
    font-weight: normal;
    color: #8b8b8b;
}

tr.dataTableBgGreen {
    background-color: #72EC39 !important;
}

tr.dataTableBgPurple {
    background-color: #ED76F8 !important;
}


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

.readCircleTrue {
    position: absolute;
    top: -13px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #797979;
    border-radius: 32px;
}

.readCircleFalse {
    position: absolute;
    top: -13px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: #FF0000;
    border-radius: 32px;
}

.formBarSize {
    height: 31px;
    position: relative;
    padding-top: 3px !important;
    top: -3px;
}

/* Notification globale de sauvegarde - palette YapWeb */
.globalSaveStatus { position:fixed;left:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));right:auto;top:auto;transform:none;z-index:2147483000;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:12px 15px;border:1px solid #45405b;border-left:4px solid #e7b45a;border-radius:9px;background:#242332;color:#f4f0ff;box-shadow:0 6px 22px rgba(0,0,0,.32);font-size:.9rem;overflow-anchor:none;margin:0;box-sizing:border-box;}
.globalSaveStatus[hidden],.globalSaveStatus button[hidden]{display:none!important}
.globalSaveStatus.is-success{border-left-color:#45bb82;color:#b4f3d2}
.globalSaveStatus.is-success .globalSaveStatusIcon{color:#45bb82;font-weight:700}
.globalSaveStatus.is-error{border-left-color:#f06d7a;color:#ffd2d6}
.globalSaveStatus.is-error .globalSaveStatusIcon{color:#f06d7a}
.globalSaveStatus.is-saving .globalSaveStatusIcon,.globalSaveStatus.is-pending .globalSaveStatusIcon{color:#e7b45a}
.globalSaveStatus button{background:transparent;border:0;color:inherit;cursor:pointer;font-size:18px;line-height:1}
@media(max-width:600px){.globalSaveStatus{left:12px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* Composants UI globaux YapWeb : utilisables dans toutes les pages. */
.uiPanel{background:var(--ui-panel);border:1px solid var(--ui-border);border-radius:12px;padding:22px;color:var(--ui-text)}
.uiPanelTitle{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--ui-border);font-size:1rem;font-weight:600;color:#fff}
.uiPanelIcon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;background:#364255;border-radius:10px;color:var(--ui-accent);font-size:1.05rem}
.uiEyebrow{color:var(--ui-accent);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:9px}
.uiEyebrow a{color:#f0c987;text-decoration:none}.uiEyebrow a:hover{text-decoration:underline}
.uiPageTitle{color:#fff;font-size:1.3rem;font-weight:600;margin:0 0 12px}
.uiMetaRow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:#a7adbb;font-size:.86rem}
.uiStatusBadge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:.76rem;font-weight:600}
.uiStatusBadge.is-active{color:#a9ecc6;background:#1d4636}.uiStatusBadge.is-inactive{color:#d4d8e0;background:#39404d}
.uiAutosaveHint{display:inline-flex;align-items:center;gap:8px;background:#293749;border:1px solid var(--ui-border);border-radius:9px;padding:8px 11px;color:#dce4ef;font-size:.82rem}
.uiMuted{color:var(--ui-muted);font-size:.8125rem;}
.uiFileSummary{display:flex;align-items:center;gap:14px;background:#151b27;border:1px solid #343d4e;border-radius:10px;padding:15px;color:#f0eef7}
.uiFileSummary>i{font-size:1.65rem;color:#e7b45a}
@media(max-width:600px){.uiPanel{padding:16px}.uiPanelTitle{margin-bottom:16px}}


/* ========================================================================== 
   YapWeb UI — Navigation et actions réutilisables
   uiBreadcrumb / uiBackButton : navigation secondaire, sans effet AJAX.
   uiActionButton : action simple (upload, ouverture, etc.), sans gestion d'attente.
   butColor / butColorIn : bouton historique avec gestion d'attente via uiButColor*.
   Ne pas modifier les mécanismes JS des boutons butColor.
   ========================================================================== */
.uiBreadcrumb{display:flex;align-items:center;gap:15px;flex-wrap:wrap;min-width:0}
.uiBreadcrumbTrail{display:flex;align-items:center;flex-wrap:wrap;gap:9px;list-style:none;padding:0;margin:0;color:#aeb5c5;font-size:.83rem}
.uiBreadcrumbTrail li{display:inline-flex;align-items:center;gap:9px;min-width:0}
.uiBreadcrumbTrail li+li::before{content:"/";color:#6c7588}
.uiBreadcrumbTrail a{color:#f5c779;text-decoration:none;transition:color .15s ease}
.uiBreadcrumbTrail a:hover{color:#fff0d3;text-decoration:underline}
.uiBreadcrumbTrail [aria-current="page"]{color:#e8e9f1}
.uiBackButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;padding:8px 12px;border-radius:9px;background:#182231;border:1px solid #46516a;color:#e9dfce!important;text-decoration:none!important;font-size:.84rem;font-weight:600;line-height:1.2;transition:background .15s,border-color .15s,transform .15s}
.uiBackButton i{font-size:1rem;color:var(--ui-accent)}
.uiBackButton:hover{background:#293749;border-color:var(--ui-accent);transform:translateX(-2px)}
.uiBackButton:focus-visible,.uiActionButton:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.uiActionButton{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:100%;padding:10px 15px;border:1px solid #d8a54c;border-radius:10px;background:var(--ui-accent);color:#17202d!important;font-size:.82rem;font-weight:650;line-height:1.25;text-align:center;text-decoration:none!important;box-shadow:0 3px 12px rgba(231,180,90,.14);cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.uiActionButton i{font-size:1rem}
.uiActionButton:hover{background:#f5c779;border-color:#f5c779;box-shadow:0 5px 16px rgba(231,180,90,.16);transform:translateY(-1px)}
.uiActionButton:active{transform:translateY(0)}
.uiActionButton.is-uploading,.uiActionButton[aria-disabled="true"]{opacity:.68;pointer-events:none;cursor:wait}
@media(max-width:600px){.uiBreadcrumb{gap:10px}.uiBreadcrumbTrail{font-size:.78rem}.uiBackButton{padding:8px 10px}}

/* ==========================================================================
   YapWeb UI — composants communs supplémentaires
   Classes explicites, réutilisables sur toutes les pages.
   Ne modifie pas butColor, uiButColor*, uiPanel, uiBreadcrumb, uiActionButton.
   ========================================================================== */
.uiPageShell{width:100%;max-width:1440px;margin:0 auto 64px;padding:18px 16px 0;min-width:0}
.uiPageShell>.uiPageTitle{margin:0 0 22px}
.uiPageActions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0 24px}
.uiPageSection{margin:18px 0 24px}
.uiPageSubtitle{color:#a7adbb;font-size:.94rem;line-height:1.6}
.uiIconButton{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;border:1px solid #46516a;border-radius:10px;background:#182231;color:#e7b45a;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.uiIconButton:hover{background:#293749;border-color:var(--ui-accent);color:#fff;transform:translateY(-1px)}
.uiIconButton:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
@media(max-width:767px){.uiPageShell{padding:12px 8px 36px}.uiPageActions{gap:9px}}


/* Boutons YapWeb : apparence commune, mecanismes historiques conserves. */
.butColor,.butColorMini,.butColorMini2{
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid #d8a54c;border-radius:10px;background:#e7b45a;
    box-shadow:0 3px 12px rgba(231,180,90,.14);
    cursor:pointer;transition:background .16s,border-color .16s,transform .16s;
}
.butColor:hover,.butColorMini:hover,.butColorMini2:hover{
    background:#f5c779;border-color:#f5c779;transform:translateY(-1px);
}
.butColorIn,.butColorMiniIn,.butColorMini2In{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:0;margin:0;padding:9px 14px;border-radius:inherit;
    background:transparent;color:#171b28;font-size:.86rem;font-weight:600;
    line-height:1.25;text-align:center;
}
.butColorInWait{border-radius:10px}
.uiActionButtonSecondary{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:10px 15px;border:1px solid #46516a;border-radius:10px;background:#182231;
    color:#e9dfce!important;text-decoration:none!important;cursor:pointer}
.uiActionButtonSecondary:hover{background:#293749;border-color:var(--ui-accent);color:#fff!important}
.uiActionButtonDanger{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:10px 15px;border:1px solid #b85d70;border-radius:10px;background:#843447;
    color:#fff!important;text-decoration:none!important;cursor:pointer}
.uiActionButtonDanger:hover{background:#a43e55}
.uiIconButtonCircle{border-radius:50%}

/* Boutons d'action dans les tableaux, y compris HTML genere par PHP. */
.uiIconButtonDanger{color:#ffb9c5;border-color:#87485a;background:#38232e}
.uiIconButtonDanger:hover{color:#fff;background:#79364b;border-color:#d07b90}
.uiIconButton + .uiIconButton{margin-left:8px}


/* Couleurs communes des nouveaux composants YapWeb. */
:root {
    --ui-panel: #1d2635;
    --ui-panel-alt: #182231;
    --ui-border: #38465a;
    --ui-text: #f6f6f9;
    --ui-muted: #afbacd;
    --ui-primary: #e7b45a;
    --ui-accent: #e7b45a;
    --ui-success: #9bddbc;
    --ui-warning: #f4c987;
    --ui-danger: #ff919d;
    --ui-radius: 12px;
}

/* Nouveaux composants reutilisables (absents du default.css initial). */
.uiTag {
    color: var(--ui-accent);
    font-size: 11px;
    letter-spacing: .07em;
    font-weight: 700;
}

.uiActionButtonPrimary {
    border-color: #e5b457;
    background: var(--ui-accent);
    color: #17202d !important;
}

.uiActionButtonPrimary:hover {
    background: #f5c779;
}

.uiActionButtonFull {
    width: 100%;
}

.uiAlert {
    display: flex;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.uiAlert > i {
    font-size: 20px;
}

.uiAlertWarning {
    border-color: #755e3b;
    background: #322c24;
    color: #efd9b6;
}

.uiAlertSuccess {
    border-color: #356553;
    background: #20362f;
    color: #bfebd3;
}

.uiAlertLink {
    display: inline-block;
    margin-top: 4px;
    color: #ffe3a9;
    text-decoration: underline;
}

.uiTabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-bottom: 1px solid #485468;
    margin-bottom: 20px;
    overflow-x: auto;
}

.uiTab {
    padding: 13px 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    border-bottom: 3px solid transparent;
    color: #bfc9d8;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.uiTab:hover {
    color: white;
}

.uiTab.is-active {
    border-bottom-color: var(--ui-accent);
    color: #ffdda0;
}

.uiTabCount {
    background: #364458;
    color: #dce4ef;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
}

.uiTabWarning {
    color: #f0c48a;
    background: #5b4632;
}

.uiSectionTitle {
    padding: 18px 0 12px;
    margin: 6px 0 15px;
    color: #f2d6a9;
    border-bottom: 1px solid #3c4b60;
    font-size: 15px;
    font-weight: 700;
}

.uiFormGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.uiField {
    min-width: 0;
    margin-bottom: 14px;
}

.uiFieldWide {
    grid-column: 1 / -1;
}

.uiField label {
    display: block;
    margin-bottom: 7px;
    color: #f3f4f8;
    font-size: 13px;
    font-weight: 600;
}

.uiField textarea {
    resize: vertical;
}

/* Pied de formulaire (boutons), distinct de la notification .globalSaveStatus. */
.uiSaveBar,
.uiModalFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    margin-top: 19px;
    border-top: 1px solid var(--ui-border);
}

.uiEmptyState {
    grid-column: 1 / -1;
    text-align: center;
    padding: 42px 20px;
    color: var(--ui-muted);
}

.uiEmptyState > i {
    display: block;
    font-size: 35px;
    color: #d5b174;
    margin-bottom: 12px;
}

.uiEmptyState h2,
.uiEmptyState h3 {
    color: #f5f5f8;
    font-size: 19px;
    margin-bottom: 8px;
}

.uiEmptyState p {
    font-size: 13px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.uiModal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.uiModalBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
}

.uiModalContent {
    position: relative;
    background: #1d2635;
    border: 1px solid #536077;
    border-radius: 14px;
    padding: 20px;
    max-width: 580px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}

.uiModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.uiModalHeader h2 {
    font-size: 19px;
    margin: 0;
}

.uiStatusWarning {
    color: #ffdb9d;
    background: #5b422d;
}

.uiStatusSuccess {
    color: #b9e7ce;
    background: #2c4f40;
}

@media (max-width: 760px) {
    .uiFieldWide {
        grid-column: auto;
    }

    .uiTabs .uiTab {
        padding: 11px;
    }
}

/* Formulaires dans les composants communs : meme apparence dans tous les modules. */
.uiPanel .form-control,
.uiPanel .form-select {
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #4b586a;
    border-radius: 9px;
    background-color: #151e2a;
    color: var(--ui-text);
    font-size: 14px;
    box-shadow: none;
}

.uiPanel .form-control:focus,
.uiPanel .form-select:focus {
    background-color: #151e2a;
    color: var(--ui-text);
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 2px rgba(231, 180, 90, .15);
}

.uiPanel .form-control::placeholder { color: #8995a8; }
.uiPanel .form-label { color: #f3f4f8; font-size: 13px; font-weight: 600; }
.uiPanel .form-select option { background: #151e2a; color: #f6f6f9; }