:root {
    --menu-back-color: #fff;
    --menu-left-back-color: linear-gradient( 125.06deg, #3376EA 7.94%, #68B0F2 117.21%);
    --menu-header-text-color: #3378e6;
    --menu-icon-color: #fff;
    --menu-icon-color-selected: #3378e6;
    --menu-text-color: #fff;
    --menu-text-accent-color: #3378e6;
    --menu-text-color: #fff;
    --accent-color-2: #4bd0b4;
    --text-color: #515465;
    --text-color-acccent: #3378e6;
}

#body {
    background-color: #fff !important;
    margin-left: 32px;
    margin-top: 90px;
}

.AccentColor {
    color: var(--text-color-acccent);
}

@font-face {
    font-family: 'FontAwesome';
    src: url('/Content/Fonts/fontawesome/webfonts/fa-solid-900.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}



#UserMenu i {
    color: #fff;
    font-size: 20px;
    align-items: center;
}


.mobile-header-margin {
    display: none;
}

i {
    font-family: FontAwesome;
    text-decoration: none;
    margin-right: 5px;
    margin-left: 5px;
    font-style: normal;
    color: var(--menu-text-accent-color);
}

.fa-myloope::before {
    content: "\f07b";
}

.fa-fidelity::before {
    content: "\f234";
}

.fa-stats::before {
    content: "\f080";
}

.fa-mail::before {
    content: "\f0e0";
}


.fa-respond:before {
    content: "\f2b5";
}

.fa-edit-page::before {
    content: "\f044";
}


.fa-parameters::before {
    content: "\f013";
}


.fa-log-out::before {
    content: "\f00d";
}


.fa-store::before {
    content: "\f54e";
}


.fa-change-dealer::before {
    content: "\f00c";
}

[name=logo] {
    position: fixed;
    margin: 0 auto;
    top: 24px;
    left: 52px;
    display: block;
    color: var(--menu-text-color)
}

[name=manager] {
    position: fixed;
    margin: 0 auto;
    top: 48px;
    left: 54px;
    display: table;
    color: var(--menu-text-accent-color);
    font-weight: 600;
    font-size: 12px
}

.user-menu-container {
    display: block;
    background-color: var(--menu-back-color);
    margin: auto;
    height: 70px;
    color: var(--menu-header-text-color);
    padding-right: 1px;
    padding-top: 0;
    text-align: right;
    position: fixed;
    width: 100%;
    z-index: 1000000000;
    border: 0;
    border-bottom: 1.5px solid;
    border-image: linear-gradient(to right,#fff,#ccc,#fff);
    border-image-slice: 1;
    top: 0;
}


.Link i, .Link .fi {
    display: flex;
    max-width: 30px;
    justify-content: flex-start;
}

#UserDiv {
    position: fixed;
    top: 0;
    z-index: 9999999;
    cursor: pointer;
    padding: 0 2px 0 0px;
    margin: 70px 5px 0 0px;
    color: #fff;
    width: 35%;
    max-width:340px;
    border-right: #ccc 1px solid;
    background: var(--menu-left-back-color);
}

    #UserDiv:hover {
        transition-property: all;
        transition-delay: 0.3s;
        border-bottom: 2px solid white;
    }

#UserMenu {
    /*   margin-top: 43px;*/
    display: none; 
}

#UserDiv > #UserMenu {
    text-align: left;
    background: var(--menu-left-back-color);
    height: calc(100vh - 75px);
    transition: ease-in height 0.3s;
    border-radius: 0 0 5px 0;
    padding-bottom: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-content: flex-start;
    margin-top: 8px;
    font-size:12px;
}




#UserMenu > a {
    display: flex;
    padding: 2px;
    color: var(--menu-text-color);
    padding-bottom: 2px;
    margin: 0 3px 0 3px;
    text-decoration: none;
    width: 100%;
}



    #UserMenu > a content {
        /*   display: none;*/
        color: var(--menu-text-color);
        margin: 8px 0 5px 8px;
        font-weight: 500;
    }

    #UserMenu > a.selected {
        border-radius: 5px;
        width: 98%;
        background-color: #ecf3fd;
    }

        #UserMenu > a.selected content {
            color: var(--menu-text-accent-color);
        }

        #UserMenu > a.selected i {
            color: var(--menu-text-accent-color);
        }
    #UserMenu > a i {
        line-height: 35px;
        font-size:14px
    }

#UserMenu.expanded {
    width: 100%;
    display: flex;
}

   

#UserMenu > a:hover {
    background-color: #fff;
    border-radius: 5px;
    width: 98%;
    color: var(--menu-text-accent-color);
}

    #UserMenu > a:hover content, #UserMenu > a:hover i {
        color: var(--menu-text-accent-color);
    }

.home-Layout-logo {
    display: none;
}


.fa-timeline::before {
    margin: 0px auto;
    display: inline-block;
    background-repeat: no-repeat;
    content: "";
    background: url('/Content/themes/base/images/loop-ui.png') -310px -144px;
    position: relative;
    height: 12px;
    width: 14px;
}


.connect.hamburger {
    float: left;
    font-size: 17px;
    margin-right: 45px;
    position: relative;
    left: 14px;
    top: 9px;
    line-height: 2px;
    letter-spacing: 1.6px;
    font-weight: 600;
    transition: all ease-in .3s;
}

    .connect.hamburger.open {
        transform: rotate(90deg);
        transition: all ease-in .3s;
    }

.usr-info-menu .usr-img {
    width: 34px;
    height: 34px;
    background-size: cover;
    position: fixed;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    left: 10px;
    top: 20px;
    display: block;
    background: #3378e6;
}

.usr-info-menu i {
    color: #fff;
}


.square-top-left {
    display: none;
}

.menu-home > nav > .menucontainer {
    position: relative;
}



@media only screen and (max-width:750px) {
    #UserMenu > a {
        margin: 0;
    }

    header {
        margin-bottom: 0px;
    }
    #body {
        margin-left: 0px;
    }
}

@media only screen and (max-width:395px) {
    header {
    }

    .content-wrapper {
        padding-top: 5px;
    }

    .user-menu-container {
        border-radius: 0;
    }

    [name=manager] {
        display: none;
    }
}


.menuAction {
    margin: 24px 0 12px 0;
}

    .menuAction > [data-id] {
        cursor: pointer;
        font-size:14px;
        font-weight:700;
        padding: 12px 24px 12px 0;
    }

    .menuAction > [data-id].selected {
        
        border: none;
    }


.title-section {
    border-top: 1px solid #808080;
    padding-top: 5px;
    margin-top: 15px;
    margin-right: 5px;
}

footer {
    background-color: var(--menu-back-color);
    color: var(--menu-text-accent-color);
    display: none;
}


.square {
    width: 250px;
    height: 250px;
    padding: 8px;
    font-size: 19px;
    font-weight: 500;
    margin: 4px 4px 0 4px;
    text-align: center;
    background: rgba(238, 217, 200, 0.15) !important;
    border-radius: 5px;
    color: var(--text-color-acccent);
}

    .square:hover {
        border: 1px solid #808080;
        transition: ease-in 0.3s all;
    }


    .square.little {
        max-width: 200px;
        min-width: 200px;
    }


.square-top-left, .square-top-right {
    background-color: var(--accent-color);
    float: left;
    top: 0;
    left: 0;
    width: 29px;
    height: 27px;
    position: absolute;
    text-align: center;
    position: fixed;
    z-index: 5006;
}

.square-top-right {
    transform: translateX(-100%);
    left: 100%;
    text-align: center;
    position: fixed;
    z-index: 5006;
}


@media only screen and (max-width:950px) {
    #UserMenu > a {
        margin: 0;
    }

    #UserDiv  {
        width: 100vw;
        max-width:initial;
    }



  
}
/* =========================================================
   BUTTONS ONLY — VERSION MODERNE
========================================================= */

/* Le design system (.btn-stylized*) reste généreux : il est utilisé
   par les pages refondues. Les classes historiques (.btn, .btn-revert,
   .btn-green) sont encore présentes dans les vues anciennes, les
   popups et les templates Handlebars : elles restent compactes pour
   ne pas casser les barres d'outils et les paginations existantes. */

.btn-stylized,
.btn-stylized-accent {
    display: inline-block;
    max-width: 100%;
    min-width: 0;
    padding: 12px 20px;
    border-radius: 14px;
    font-family: 'Open Sans', 'Segoe UI', Roboto, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    outline: none;
}

.btn,
.btn-revert,
.btn-green {
    display: inline-block;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Open Sans', 'Segoe UI', Roboto, Verdana, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    outline: none;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.btn-stylized-accent {
    color: #fff;
    border: none;
    background: linear-gradient( 135deg, #3376EA, #68B0F2 );
    box-shadow: 0 12px 28px rgba(51,120,230,.18);
}

    .btn-stylized-accent:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 38px rgba(51,120,230,.24);
    }

    .btn-stylized-accent::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent );
        transition: .7s;
    }

    .btn-stylized-accent:hover::before {
        left: 120%;
    }

/* .btn : version compacte du bouton principal. Pas de ::before ni
   d'overflow:hidden, qui coupaient le contenu de certains boutons
   historiques (liens internes, libellés sur deux lignes). */
.btn {
    color: #fff;
    border: none;
    background: linear-gradient( 135deg, #3376EA, #68B0F2 );
    box-shadow: 0 4px 12px rgba(51,120,230,.16);
}

    .btn:hover {
        background: linear-gradient( 135deg, #2b68d4, #5aa4ea );
        box-shadow: 0 8px 18px rgba(51,120,230,.24);
    }

/* =========================================================
   SECONDARY BUTTON
========================================================= */

.btn-stylized {
    background: #fff;
    color: var(--text-color-acccent);
    border: 1px solid #DCE8FA;
    box-shadow: 0 4px 14px rgba(51,120,230,.06);
}

    .btn-stylized:hover {
        background: #F5F9FF;
        border-color: #BCD5FF;
        transform: translateY(-2px);
    }

.btn-revert {
    background: #fff;
    color: var(--text-color-acccent);
    border: 1px solid #DCE8FA;
}

    .btn-revert:hover {
        background: #F5F9FF;
        border-color: #BCD5FF;
        color: var(--text-color-acccent);
    }

/* =========================================================
   GREEN BUTTON
========================================================= */

.btn-green {
    color: #fff;
    border: none;
    background: linear-gradient( 135deg, #31C6A3, #4bd0b4 );
    box-shadow: 0 4px 12px rgba(75,208,180,.18);
}

    .btn-green:hover {
        color: #fff;
        background: linear-gradient( 135deg, #28b394, #43c3a7 );
        box-shadow: 0 8px 18px rgba(75,208,180,.24);
    }

/* =========================================================
   IA BUTTON
========================================================= */

.btn-action {
    background: var(--menu-left-back-color);
    color: #ffffff;
    padding: 6px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(107, 99, 181, 0.4);
    transition: all 0.2s ease;
    margin:4px;
}

    .btn-action:hover {
 
        box-shadow: 0 6px 20px rgba(107, 99, 181, 0.6);
      
    }

@keyframes aiGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =========================================================
   DISABLED
========================================================= */

.btn:disabled,
.btn-revert:disabled,
.btn-green:disabled,
.btn-ai:disabled,
.btn-stylized:disabled,
.btn-stylized-accent:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* =========================================================
   FOCUS
========================================================= */

.btn:focus,
.btn-ai:focus,
.btn-revert:focus,
.btn-green:focus {
    box-shadow: 0 0 0 4px rgba(51,120,230,.15);
}

/* =========================================================
   SMALL BUTTON
========================================================= */

.btn-sm {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px !important;
    border-radius: 12px !important;
}

/* =========================================================
   LARGE BUTTON
========================================================= */

.btn-lg {
    min-height: 56px;
    padding: 0 28px;
    font-size: 16px !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media only screen and (max-width:750px) {

    .btn,
    .btn-revert,
    .btn-green,
    .btn-ai,
    .btn-stylized,
    .btn-stylized-accent {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        border-radius: 12px !important;
        font-size: 14px !important;
    }

        .btn  span,
        .btn-revert  span,
        .btn-green  span,
        .btn-ai span,
        .btn-stylized  span,
        .btn-stylized-accent  span
        {
           margin-bottom:0;
        }
}

/* Les marges globales des <span> ont été retirées : elles cassaient
   l'espacement des vues de l'espace Pro (Welcome, formulaires, etc.). */

/* =========================================================
   ADMIN DESIGN SYSTEM — Espace Pro (Views/Manage)
   Palette issue du thème : bleu #3376EA/#68B0F2, turquoise
   #06BEB6, vert #4bd0b4, encre #143051.
   Tous les composants sont préfixés .adm-* pour éviter toute
   régression sur les autres pages de l'espace Pro.
========================================================= */

:root {
    --adm-surface: #ffffff;
    --adm-surface-soft: #f8fafc;
    --adm-surface-blue: #f5f9ff;
    --adm-border: #e5e5e5;
    --adm-border-strong: #d7e3f5;
    --adm-text: #143051;
    --adm-muted: #6b7280;
    --adm-radius-sm: 10px;
    --adm-radius: 14px;
    --adm-radius-lg: 20px;
    --adm-shadow-sm: 0 4px 14px rgba(20, 48, 81, .05);
    --adm-shadow: 0 12px 32px rgba(20, 48, 81, .08);
    --adm-success: #31c6a3;
    --adm-success-soft: #e8faf5;
    --adm-danger: #d9534f;
    --adm-danger-soft: #fdecec;
    --adm-warning: #d8750a;
    --adm-warning-soft: #fff4e6;
    --adm-info: #3378e6;
    --adm-info-soft: #ecf3fd;
    --adm-gap: 20px;
    --adm-blue-gradient: linear-gradient(135deg, #3376EA, #68B0F2);
}

/* ---------- Page ---------- */

.adm-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 20px 48px;
    color: var(--adm-text);
    font-family: 'Open Sans', 'Segoe UI', Roboto, Verdana, sans-serif;
}

/* Les champs de formulaire n'héritent pas de la police par défaut :
   sans cette règle ils restent en police système (serif sur Chrome). */
.adm-page button,
.adm-page input,
.adm-page select,
.adm-page textarea {
    font-family: inherit;
}

.adm-page--wide {
    max-width: 1480px;
}

.adm-page--narrow {
    max-width: 560px;
}

.adm-page--narrow .adm-card {
    padding: 28px;
}

.adm-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 12px 0 24px;
}

.adm-page-head-main {
    min-width: 220px;
    flex: 1 1 320px;
}

.adm-title {
    margin: 0 0 4px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--adm-text);
}

.adm-title-sm {
    font-size: 20px;
    margin-bottom: 2px;
}

.adm-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--adm-muted);
}

.adm-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--adm-muted);
}

    .adm-breadcrumb a {
        color: var(--adm-info);
        font-weight: 600;
    }

.adm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.adm-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ---------- Grilles ---------- */

.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--adm-gap);
}

.adm-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.adm-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.adm-grid--kpi {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.adm-stack {
    display: flex;
    flex-direction: column;
    gap: var(--adm-gap);
}

.adm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.adm-row--between {
    justify-content: space-between;
}

.adm-spacer {
    flex: 1 1 auto;
}

.adm-span-all {
    grid-column: 1 / -1;
}

.adm-chart-slot {
    min-height: 0;
}

/* Valeur textuelle renvoyée par le service de statistiques
   (ex. « 12 cartes créées sur 90 jours »). */
.adm-chart-slot--value {
    color: var(--adm-info);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.adm-muted {
    color: var(--adm-muted);
    font-size: 13px;
    font-weight: 400;
}

.adm-org-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    padding: 6px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
}

.adm-org-logo--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--adm-muted);
    font-size: 28px;
}

.adm-social {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adm-social-prefix {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
}

.adm-logo {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border: 1px solid var(--adm-border);
    border-radius: 12px;
    background-color: var(--adm-surface-soft);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ---------- Cartes ---------- */

.adm-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.adm-card--flat {
    box-shadow: none;
}

.adm-card--soft {
    background: var(--adm-surface-soft);
    box-shadow: none;
}

.adm-card--tight {
    gap: 10px;
    padding: 14px 16px;
}

.adm-card--clickable,
a.adm-card {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

button.adm-card {
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

    .adm-card--clickable:hover,
    a.adm-card:hover {
        transform: translateY(-2px);
        border-color: var(--adm-border-strong);
        box-shadow: var(--adm-shadow);
    }

/* ---------- Flèche d'affordance ----------
   Les cartes qui déclenchent une action (.adm-card--go) affichent une
   petite flèche discrète dans leur coin inférieur droit, pour montrer
   d'un coup d'œil qu'elles sont cliquables. */
.adm-card--go {
    position: relative;
    padding-bottom: 32px;
}

    .adm-card--go::after {
        content: "";
        position: absolute;
        right: 18px;
        bottom: 13px;
        width: 8px;
        height: 8px;
        border-top: 2px solid var(--adm-info);
        border-right: 2px solid var(--adm-info);
        opacity: .45;
        transform: rotate(45deg);
        transition: opacity .2s ease, transform .2s ease;
    }

    .adm-card--go:hover::after,
    .adm-card--go:focus-visible::after {
        opacity: 1;
        transform: translateX(3px) rotate(45deg);
    }

.adm-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.adm-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--adm-text);
}

.adm-card-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--adm-muted);
}

.adm-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 4px;
}

.adm-card--accent {
    border-top: 3px solid var(--adm-info);
}

/* ---------- Icônes & KPI ---------- */

.adm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--adm-info-soft);
    color: var(--adm-info);
    font-size: 19px;
    line-height: 1;
}

    .adm-icon img {
        max-height: 22px;
        width: auto;
    }

    .adm-icon i,
    .adm-icon .fi {
        margin: 0;
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        background: none !important;
        font-size: inherit !important;
    }

.adm-icon--success {
    background: var(--adm-success-soft);
    color: #149e82;
}

.adm-icon--warning {
    background: var(--adm-warning-soft);
    color: var(--adm-warning);
}

.adm-icon--danger {
    background: var(--adm-danger-soft);
    color: var(--adm-danger);
}

.adm-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-sm);
}

.adm-kpi-body {
    min-width: 0;
}

.adm-kpi-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--adm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-kpi-label {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adm-muted);
}

.adm-kpi-hint {
    margin-top: 2px;
    font-size: 11px;
    color: var(--adm-muted);
}

/* ---------- Onglets ---------- */

.adm-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 22px;
    padding-bottom: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--adm-border);
}

.adm-tab {
    flex: 0 0 auto;
    padding: 11px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    background: transparent;
    color: var(--adm-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

    .adm-tab:hover {
        color: var(--adm-info);
        background: var(--adm-info-soft);
    }

    .adm-tab.is-active,
    .adm-tab.selected {
        color: var(--adm-info);
        border-bottom-color: var(--adm-info);
    }

/* ---------- Tableaux ---------- */

.adm-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--adm-surface);
}

    .adm-table th {
        padding: 12px 16px;
        border-bottom: 1px solid var(--adm-border);
        background: var(--adm-surface-soft);
        color: var(--adm-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .adm-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
        color: var(--adm-text);
        vertical-align: middle;
    }

    .adm-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .adm-table tbody tr:hover {
        background: #fafcff;
    }

/* ---------- Listes ---------- */

.adm-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adm-list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
}

.adm-list-main {
    flex: 1 1 280px;
    min-width: 0;
}

.adm-list-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--adm-text);
}

.adm-list-meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--adm-muted);
    word-break: break-word;
}

/* ---------- Badges ---------- */

.adm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--adm-info-soft);
    color: var(--adm-info);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}

.adm-badge.is-success {
    background: var(--adm-success-soft);
    color: #0f8f75;
}

.adm-badge.is-warning {
    background: var(--adm-warning-soft);
    color: var(--adm-warning);
}

.adm-badge.is-danger {
    background: var(--adm-danger-soft);
    color: var(--adm-danger);
}

.adm-badge.is-muted {
    background: #f1f2f4;
    color: var(--adm-muted);
}

/* ---------- Alertes ---------- */

.adm-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #c9dcfb;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-info-soft);
    color: #1c4fa8;
    font-size: 14px;
    line-height: 1.5;
}

    .adm-alert.is-success {
        border-color: #b8ede0;
        background: var(--adm-success-soft);
        color: #0f7f68;
    }

    .adm-alert.is-warning {
        border-color: #f3d3a6;
        background: var(--adm-warning-soft);
        color: #a85a06;
    }

    .adm-alert.is-error {
        border-color: #f3c2c0;
        background: var(--adm-danger-soft);
        color: #a5342f;
    }

a.adm-alert {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease;
}

    a.adm-alert:hover {
        transform: translateY(-1px);
        box-shadow: var(--adm-shadow-sm);
    }

    .adm-alert i {
        margin-top: 2px;
        color: inherit !important;
        background: none !important;
        -webkit-text-fill-color: currentColor !important;
    }

/* ---------- État vide ---------- */

.adm-empty {
    padding: 42px 20px;
    border: 1px dashed var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface-soft);
    color: var(--adm-muted);
    text-align: center;
}

    .adm-empty .adm-icon {
        margin: 0 auto 12px;
        background: #fff;
    }

    .adm-empty-title {
        margin-bottom: 6px;
        color: var(--adm-text);
        font-size: 15px;
        font-weight: 700;
    }

    .adm-empty-text {
        font-size: 13px;
        line-height: 1.5;
    }

/* ---------- Formulaires ---------- */

.adm-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.adm-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* Variante compacte pour les formulaires longs (fenêtres modales) :
   on réduit les espacements verticaux sans changer la structure. */
.adm-form-compact {
    gap: 12px;
}

.adm-form-compact .adm-form-row {
    gap: 12px;
}

.adm-form-compact .adm-field {
    gap: 4px;
}

.adm-form-compact .adm-help {
    font-size: 11px;
    line-height: 1.35;
}

.adm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.adm-label {
    color: var(--adm-text);
    font-size: 13px;
    font-weight: 700;
}

.adm-help {
    color: var(--adm-muted);
    font-size: 12px;
    line-height: 1.5;
}

.adm-error {
    color: var(--adm-danger);
    font-size: 12px;
    font-weight: 600;
}

.adm-page input[type="text"],
.adm-page input[type="password"],
.adm-page input[type="email"],
.adm-page input[type="url"],
.adm-page input[type="tel"],
.adm-page input[type="number"],
.adm-page input[type="search"],
.adm-page select,
.adm-page textarea,
.adm-input {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    color: var(--adm-text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .adm-page textarea,
    .adm-input--textarea {
        min-height: 120px;
        resize: vertical;
    }

    .adm-page input[type="text"]:focus,
    .adm-page input[type="password"]:focus,
    .adm-page input[type="email"]:focus,
    .adm-page input[type="url"]:focus,
    .adm-page input[type="tel"]:focus,
    .adm-page input[type="number"]:focus,
    .adm-page input[type="search"]:focus,
    .adm-page select:focus,
    .adm-page textarea:focus,
    .adm-input:focus {
        border-color: var(--adm-info);
        box-shadow: 0 0 0 4px rgba(51, 120, 230, .14);
        outline: none;
    }

    .adm-page input.input-validation-error,
    .adm-page select.input-validation-error,
    .adm-page textarea.input-validation-error {
        border-color: var(--adm-danger);
        box-shadow: 0 0 0 4px rgba(217, 83, 79, .12);
    }

.adm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
    font-size: 13px;
    line-height: 1.4;
}

.adm-check--boxed {
    padding: 8px 12px;
    background: var(--adm-surface-soft);
}

    .adm-check input {
        margin-top: 2px;
        flex: 0 0 auto;
    }

/* ---------- Actions ---------- */

.adm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top:8px;
}

.adm-actions--end {
    justify-content: flex-end;
}

.adm-actions--split {
    justify-content: space-between;
}

.adm-link-action {
    display: inline-block;
    color: var(--adm-info);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

    .adm-link-action > span {
        line-height: 1.2;
    }

    .adm-page .adm-link-action i,
    .adm-page .adm-link-action .fi {
        font-size: 14px;
    }

    .adm-link-action:hover {
        text-decoration: underline;
    }

    .adm-link-action.is-danger {
        color: var(--adm-danger);
    }

    .adm-link-action.is-success {
        color: #149e82;
    }

/* ---------- Modale ---------- */

.adm-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 19999;
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 24px;
    overflow: auto;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: 0 24px 64px rgba(20, 48, 81, .22);
    transform: translate(-50%, -50%);
}

.adm-modal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

/* ---------- Chargement ---------- */

.adm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: var(--adm-muted);
    font-size: 13px;
}

/* ---------- Loaders : un seul visuel (coolloader.gif) ----------
   Site.css déclare encore des sprites load.gif (43 × 11) pour .loader,
   .load, #load et .coolloader, et étire .loader-cool avec « cover ».
   On neutralise ces fonds : un unique pseudo-élément affiche
   coolloader.gif, à taille fixe et sans déformation, dans tous les
   cas (élément bloc ou passé en inline par un fadeIn jQuery). */
.loader,
.loader-cool,
.coolloader,
.load {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    background: none !important;
}

/* #load : utilisé par LoopNs.ShowPopup('load') / HidePopup('load').
   On neutralise seulement le sprite ; la marge gauche (48 %) reste
   celle du thème, et ShowPopup la remplace par un positionnement
   centré calculé à l'ouverture. */
#load {
    float: none !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
}

.loader::before,
.loader-cool::before,
.coolloader::before,
.load::before,
#load::before,
.adm-loading::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 56px;
    height: 24px;
    vertical-align: middle;
    background: url("/Content/themes/base/images/coolloader.gif") center / contain no-repeat;
}

/* Ancien indicateur de fin d'action (image ronde en 150 px). */
#coolldfinish {
    width: 72px !important;
    height: auto !important;
}

/* ---------- Compatibilité vues existantes ---------- */

#body .questonGroup {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-sm);
}

#body .questonGroupTitle {
    margin-bottom: 8px;
    color: var(--adm-text);
    font-size: 16px;
    font-weight: 700;
}

#body .questonGroup .item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}

    #body .questonGroup .item:last-child {
        border-bottom: 0;
    }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 750px) {
    .adm-page {
        padding: 4px 12px 36px;
    }

    .adm-title {
        font-size: 23px;
    }

    .adm-page-head {
        margin-bottom: 18px;
    }

    .adm-grid,
    .adm-grid--2,
    .adm-grid--3,
    .adm-grid--kpi {
        grid-template-columns: 1fr;
    }

    .adm-card {
        padding: 16px;
    }

    .adm-list-row {
        align-items: stretch;
    }

    .adm-actions,
    .adm-actions--end {
        width: 100%;
    }

        .adm-actions > .btn,
        .adm-actions > .btn-stylized,
        .adm-actions > .btn-stylized-accent,
        .adm-actions > .btn-green,
        .adm-actions > .btn-revert {
            flex: 1 1 auto;
        }
}

/* ---------- Garde-fou : .hidden doit toujours masquer ----------
   Les utilitaires du design system (.adm-grid, .adm-card…)
   sont chargés après Site.css et définissent leur propre
   « display » : à spécificité égale, ils écrasaient .hidden.
   On double la classe pour rendre le masquage prioritaire,
   sans !important, afin que jQuery .show()/.fadeIn() (style
   inline) continue de révéler les éléments normalement. */

.hidden.hidden {
    display: none;
}

/* ---------- Icônes : normalisation dans le design system ----------
   font-picts.css applique globalement à `i` :
       font-size: 40px; margin: 0 5px; color: var(--menu-text-accent-color)
   Ce qui provoque des débordements (icônes 40px dans des boutons
   ou des pastilles 44px) et des désalignements. On normalise donc
   les icônes dans les composants du design system. */

.adm-page i,
.adm-page .fi,
[class*="adm-"] i,
.adm-icon i,
.adm-tabs i,
.adm-tab i,
.adm-alert i,
.adm-empty i,
.adm-badge i,
.adm-link-action i,
.adm-card-title i,
.adm-kpi i,
.btn i,
.btn-stylized i,
.btn-stylized-accent i,
.btn-revert i,
.btn-green i,
.btn-action i {
    font-size: 1em;
    line-height: 1;
    margin: 0;
    color: currentColor;
    flex: 0 0 auto;
}

/* Les grandes pastilles gardent une icône lisible */
.adm-icon i {
    font-size: 19px;
}

.adm-empty .adm-icon i {
    font-size: 22px;
}

/* ---------- Alignement icône / libellé ----------
   Les boutons sont en inline-block (et non inline-flex) :
   l'icône et le texte doivent donc être alignés verticalement
   et espacés explicitement. Déclaré en fin de fichier pour
   passer après la normalisation des icônes ci-dessus. */

.btn-stylized i,
.btn-stylized-accent i,
.btn i,
.btn-revert i,
.btn-green i,
.btn-action i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 0 0;
    font-size: 1em;
    line-height: 1;
}

    .btn-stylized i:only-child,
    .btn-stylized-accent i:only-child,
    .btn i:only-child,
    .btn-revert i:only-child,
    .btn-green i:only-child,
    .btn-action i:only-child {
        margin-right: 0;
    }

.btn-stylized > span,
.btn-stylized-accent > span,
.btn > span,
.btn-revert > span,
.btn-green > span,
.btn-action > span {
    display: inline;
    vertical-align: middle;
    line-height: 1.25;
}

.adm-link-action i,
.adm-link-action .fi {
    display: inline-block;
    vertical-align: middle;
    margin: 0 6px 0 0;
    font-size: 14px;
    line-height: 1;
}

.adm-link-action > span {
    display: inline;
    vertical-align: middle;
}

/* =========================================================
   FIDÉLITÉ — Dealer/FidelizationManagement
   Composants spécifiques à la vue (bons, étapes, exports).
========================================================= */

.adm-fidelity [data-name] > .adm-card,
.adm-fidelity [data-name] > .adm-alert {
    margin-bottom: 18px;
}

    .adm-fidelity [data-name] > .adm-card:last-child,
    .adm-fidelity [data-name] > .adm-alert:last-child {
        margin-bottom: 0;
    }

.adm-input--sm,
.adm-page .adm-input--sm {
    width: auto;
    max-width: 170px;
}

.adm-readonly {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
    color: var(--adm-text);
    font-size: 14px;
    font-weight: 700;
}

/* ---------- Cases à cocher ---------- */

.adm-check {
    cursor: pointer;
}

.adm-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--adm-info);
}

.adm-check strong {
    display: block;
    color: var(--adm-text);
    font-size: 14px;
}

.adm-check .adm-help {
    display: block;
    margin-top: 2px;
    font-weight: 400;
}

.adm-check--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 14px;
    white-space: nowrap;
}

.adm-checkbox {
    width: 20px;
    height: 20px;
    accent-color: var(--adm-info);
    cursor: pointer;
}

/* ---------- Illustration ---------- */

.adm-media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
}

    .adm-media img {
        max-width: 200px;
        height: auto;
        border-radius: 10px;
    }

.adm-upload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-blue);
    color: var(--adm-info);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

    .adm-upload:hover {
        border-color: var(--adm-info);
        background: var(--adm-info-soft);
    }

    .adm-upload i {
        margin: 0;
        font-size: 16px;
    }

.adm-voucher-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .adm-voucher-preview img {
        max-width: 140px;
        max-height: 140px;
        border: 1px solid var(--adm-border);
        border-radius: var(--adm-radius-sm);
    }

    .adm-voucher-preview img:not([src]),
    .adm-voucher-preview img[src=""] {
        display: none;
    }

/* ---------- Formulaire de bon ---------- */

.adm-voucher-form {
    margin-top: 4px;
}

.adm-voucher-type {
    padding: 18px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
}

.adm-voucher-groups .adm-list-row {
    padding: 12px 14px;
    gap: 10px;
}

    .adm-voucher-groups .adm-list-row .adm-checkbox {
        flex: 0 0 auto;
    }

.adm-voucher-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #c9dcfb;
    border-radius: var(--adm-radius-sm);
    background: var(--adm-info-soft);
    color: var(--adm-text);
    font-size: 13px;
    line-height: 1.55;
}

    .adm-voucher-hint > i {
        margin: 2px 0 0;
        color: var(--adm-info);
        font-size: 16px;
    }

    .adm-voucher-hint strong {
        display: block;
        margin-bottom: 2px;
    }

.adm-voucher-targets {
    width: 100%;
}

.adm-inline-datepicker {
    display: inline-block;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface);
}

/* ---------- Liste des bons ---------- */

.adm-voucher-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.adm-voucher-list-head {
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.adm-voucher-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--adm-border);
    border-left: 4px solid var(--adm-success);
    border-radius: var(--adm-radius);
    background: var(--adm-surface);
    box-shadow: var(--adm-shadow-sm);
}

.adm-voucher-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--adm-info);
    font-size: 12px;
    font-style: italic;
}

    .adm-voucher-badge img {
        width: auto;
        height: 20px;
    }

.adm-voucher-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.adm-voucher-media {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border: 1px solid var(--adm-border);
    border-radius: 12px;
    background-color: var(--adm-surface-soft);
    background-position: center;
    background-size: cover;
}

.adm-voucher-text {
    flex: 1 1 220px;
    min-width: 0;
    color: var(--adm-text);
    font-size: 14px;
    line-height: 1.5;
}

.adm-voucher-cost {
    color: var(--adm-info);
    font-weight: 700;
    white-space: nowrap;
}

.adm-voucher-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--adm-border);
}

@media only screen and (max-width: 600px) {
    .adm-voucher-actions {
        width: 100%;
        padding: 10px 0 0;
        border-top: 1px solid var(--adm-border);
        border-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ---------- Étapes de points ---------- */

.adm-step-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.adm-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--adm-border-strong);
    border-radius: 999px;
    background: var(--adm-surface-blue);
    color: var(--adm-text);
    font-size: 13px;
    font-weight: 700;
}

    .adm-step .btn-revert.adm-step-remove {
        min-height: 0;
        padding: 4px 8px;
        border-radius: 999px;
        line-height: 1;
    }

    .adm-step .adm-step-remove i {
        margin: 0;
        font-size: 12px;
    }

.adm-credit-options {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid var(--adm-border);
}

/* ---------- Options de l'application Pro ---------- */

.adm-option-intro {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 6px;
    color: var(--adm-muted);
    font-size: 13px;
    line-height: 1.5;
}

    .adm-option-intro i {
        margin: 2px 0 0;
        color: var(--adm-info);
        font-size: 14px;
    }

.adm-option-list {
    display: flex;
    flex-direction: column;
}

.adm-option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--adm-border);
}

.adm-option-text {
    flex: 1 1 260px;
    min-width: 0;
}

.adm-option-title {
    color: var(--adm-text);
    font-size: 14px;
    font-weight: 700;
}

.adm-option-text .adm-help {
    margin: 3px 0 0;
}

.adm-option-control {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

    .adm-option-control .adm-input,
    .adm-page .adm-option-control .adm-input {
        width: 96px;
        max-width: 96px;
        text-align: right;
    }

    .adm-option-control .adm-switch {
        align-self: center;
    }

.adm-option-control .adm-switch-text {
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
}

    .adm-option-control .adm-switch-text::after {
        content: attr(data-off);
    }

    .adm-option-control .adm-switch input:checked ~ .adm-switch-text {
        color: var(--adm-info);
    }

        .adm-option-control .adm-switch input:checked ~ .adm-switch-text::after {
            content: attr(data-on);
        }

.adm-option-list .adm-credit-options {
    margin-top: 0;
    padding: 14px 0 2px 16px;
    border-top: 0;
    border-left: 2px solid var(--adm-info-soft);
}

.adm-save-status {
    display: none;
    align-items: center;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--adm-radius-sm);
    font-size: 13px;
    font-weight: 600;
}

    .adm-save-status.is-visible {
        display: flex;
    }

    .adm-save-status.is-success {
        border-color: #b9e6d6;
        background: var(--adm-success-soft);
        color: #17795f;
    }

    .adm-save-status.is-info {
        border-color: #c6dcfa;
        background: var(--adm-info-soft);
        color: var(--adm-info);
    }

    .adm-save-status.is-warning {
        border-color: #f3dcb8;
        background: var(--adm-warning-soft);
        color: var(--adm-warning);
    }

    .adm-save-status.is-danger {
        border-color: #f3cbc9;
        background: var(--adm-danger-soft);
        color: var(--adm-danger);
    }

/* ---------- Calcul automatique des points ---------- */

.adm-calc {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
    transition: opacity .2s ease;
}

    .adm-calc.is-disabled .adm-calc-equation {
        opacity: .5;
    }

.adm-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    color: var(--adm-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

    .adm-switch input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        opacity: 0;
        overflow: hidden;
    }

.adm-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #d7dde6;
    transition: background .2s ease;
}

    .adm-switch-track::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(20, 48, 81, .25);
        transition: transform .2s ease;
    }

    .adm-switch input:checked + .adm-switch-track {
        background: var(--adm-info);
    }

        .adm-switch input:checked + .adm-switch-track::after {
            transform: translateX(20px);
        }

    .adm-switch input:focus-visible + .adm-switch-track {
        box-shadow: 0 0 0 4px rgba(51, 120, 230, .18);
    }

.adm-calc-equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    transition: opacity .2s ease;
}

.adm-calc-word {
    color: var(--adm-text);
    font-weight: 600;
}

.adm-input--calc,
.adm-page .adm-input--calc {
    width: 110px;
    max-width: 110px;
    text-align: right;
}

.adm-calc-unit {
    color: var(--adm-muted);
    font-size: 13px;
}

/* ---------- Logo dans un bouton ---------- */

.btn-stylized img,
.btn-stylized-accent img {
    display: inline-block;
    width: auto;
    height: 18px;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

/* ---------- Indicateur de chargement de la vue ---------- */

#load.adm-loading {
    position: fixed;
    z-index: 10000;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 18px 28px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: #fff;
    box-shadow: var(--adm-shadow);
    color: var(--adm-text);
    font-weight: 600;
}

/* ==========================================================================
   Boutique connectée (Manage/Dealer/MarketPlaceManagement)
   ========================================================================== */

.adm-market-body {
    padding: 18px 4px 8px;
    background: transparent;
}

.adm-market-body > [data-name] {
    animation: admFadeIn .18s ease-in-out;
}

@keyframes admFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.adm-toolbar-group--grow {
    flex: 1 1 320px;
}

/* ---------- Recherche et filtre ---------- */

.adm-search {
    display: flex;
    flex: 1 1 1px;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    padding: 0 12px;
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    background: var(--adm-surface);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.adm-search:focus-within {
    border-color: var(--adm-info);
    box-shadow: 0 0 0 3px var(--adm-info-soft);
}

.adm-search i {
    margin: 0;
    color: var(--adm-muted);
    font-size: 14px;
}

.adm-page .adm-search input,
.adm-search input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 9px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.adm-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.adm-page .adm-select-inline,
.adm-select-inline {
    min-width: 170px;
    margin: 0;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--adm-border);
    border-radius: 999px;
    background-color: var(--adm-surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    color: var(--adm-text);
    font-size: 13px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.adm-page .adm-select-inline:focus,
.adm-select-inline:focus {
    border-color: var(--adm-info);
    outline: none;
    box-shadow: 0 0 0 3px var(--adm-info-soft);
}

/* ---------- Zones défilantes ---------- */

.adm-scroll {
    max-height: min(62vh, 720px);
    padding: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.adm-scroll-y {
    max-height: 260px;
    overflow-y: auto;
}

.adm-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 0 0;
}

.adm-pagination .btn {
    min-width: 44px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

/* ---------- Fiche produit ---------- */

.adm-product {
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border-radius: var(--adm-radius);
    box-shadow: var(--adm-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.adm-product:hover {
    border-color: var(--adm-border-strong);
    box-shadow: var(--adm-shadow);
}

.adm-page .adm-product .photo,
.adm-product .adm-product-media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--adm-border);
    border-radius: 14px;
    background-color: var(--adm-surface-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.adm-product-main {
    flex: 1 1 320px;
    min-width: 0;
}

.adm-product-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.adm-product-heading .adm-list-title {
    font-size: 16px;
    line-height: 1.3;
}

.adm-product-ref {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}

.adm-product-description {
    display: -webkit-box;
    max-width: 100%;
    margin-top: 6px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.adm-product-price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: auto;
    text-align: right;
}

.adm-product-amount {
    padding: 6px 12px;
    font-size: 14px;
}

.adm-product-unit {
    color: var(--adm-muted);
    font-size: 12px;
    line-height: 1.4;
}

.adm-product-foot {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--adm-border);
}

.adm-product-link {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.adm-product-link-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.adm-product-link-label i {
    color: var(--adm-info);
}

.adm-page .adm-copy-input,
.adm-copy-input {
    flex: 1 1 220px;
    min-width: 140px;
    height: 32px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid var(--adm-border) !important;
    border-radius: 8px !important;
    background: var(--adm-surface-soft) !important;
    color: var(--adm-muted);
    font-size: 12px !important;
    box-shadow: none !important;
}

.adm-product-link .adm-link-action {
    
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--adm-info-soft);
    color: var(--adm-info);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background .15s ease, color .15s ease;
}

.adm-product-link .adm-link-action:hover {
    background: #dfeafc;
    color: #2563c9;
}

.adm-product-link .adm-link-action i {
    font-size: 12px;
}

/* Les boutons d'action de la fiche produit sont volontairement
   discrets et identiques : même hauteur, même rayon, même graisse.
   Le thème charge des règles !important sur .btn-stylized (padding,
   survol) : on les neutralise ici, uniquement dans cette barre. */
.adm-product-actions {
    flex: 0 0 auto;
    margin-top: 0;
    gap: 8px;
}

.adm-product-actions > button {
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--adm-border);
    border-radius: 9px;
    background: #fff;
    color: var(--adm-text);
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.adm-product-actions > button i {
    font-size: 12px;
}

.adm-product-actions > button.btn-stylized i {
    color: var(--adm-info);
}

.adm-product-actions > button.btn-revert i {
    color: var(--adm-muted);
}

.adm-product-actions > button.btn-green i {
    color: var(--adm-success);
}

.adm-product-actions > button:hover {
    border-color: var(--adm-border-strong) !important;
    background: var(--adm-surface-soft) !important;
    color: var(--adm-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.adm-product-actions > button.btn-stylized:hover {
    border-color: #bcd5ff !important;
    background: var(--adm-info-soft) !important;
    color: var(--adm-info) !important;
}

.adm-product-actions > button.btn-revert:hover {
    border-color: #f3c9c7 !important;
    background: var(--adm-danger-soft) !important;
    color: var(--adm-danger) !important;
}

.adm-product-actions > button.btn-green:hover {
    border-color: #b7e9dd !important;
    background: var(--adm-success-soft) !important;
    color: #0f8f75 !important;
}

.adm-product-actions .updown_article-contenainer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
}

.adm-product-actions .updown_article {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--adm-border);
    border-radius: 5px;
    background: #fff;
    color: var(--adm-muted);
    font-size: 8px;
    line-height: 1;
}

.adm-product-actions .updown_article:hover {
    border-color: var(--adm-info);
    background: var(--adm-info-soft);
    color: var(--adm-info);
}

@media (max-width: 720px) {
    .adm-product-price {
        align-items: flex-start;
        margin-left: 0;
        text-align: left;
    }

    .adm-product-link {
        flex-basis: 100%;
    }

    .adm-product-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ---------- Choix produit (chips) ---------- */

.adm-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.adm-inline > input {
    flex: 1 1 220px;
    min-width: 160px;
}

.adm-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.adm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 6px 5px 12px;
    border: 1px solid var(--adm-border-strong);
    border-radius: 999px;
    background: var(--adm-surface-blue);
    color: var(--adm-text);
    font-size: 12px;
    font-weight: 600;
}

.adm-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--adm-danger);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.adm-chip-remove:hover {
    background: var(--adm-danger);
    color: #fff;
}

/* Pastilles collées au libellé qui les précède (formulaires en colonne). */
.adm-chip-list--flush {
    margin-top: 0;
}

/* ---------- Fiche client (AdmUpdate) ---------- */

/* Liste filtrable de cases à cocher (catégories du client). */
.adm-check-list {
    padding: 8px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
}

    .adm-check-list .adm-check {
        padding: 8px 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
    }

        .adm-check-list .adm-check:hover {
            background: var(--adm-surface);
        }

/* Valeur en lecture seule (date de début de validité). */
.adm-readout {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px dashed var(--adm-border-strong);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
    color: var(--adm-text);
    font-size: 14px;
    font-weight: 600;
}

/* Champ texte d'option : plus large que les champs numériques (96 px). */
.adm-option-control .adm-input--wide,
.adm-page .adm-option-control .adm-input--wide {
    width: 240px;
    max-width: 240px;
    text-align: left;
}

/* Champs verrouillés (ex. coût du point déjà défini pour le client). */
.adm-page input:disabled,
.adm-page select:disabled {
    background: var(--adm-surface-soft);
    color: var(--adm-muted);
    cursor: not-allowed;
}

/* ---------- Photos ---------- */

.adm-photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.adm-photo-tile {
    position: relative;
}

.adm-page .adm-photo-grid .photo-edit,
.adm-photo-grid .photo-edit {
    width: 96px;
    height: 96px;
    margin: 0;
    padding: 0;
    border: 2px dashed var(--adm-border-strong);
    border-radius: 12px;
    background-color: var(--adm-surface-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}

.adm-page .adm-photo-grid .photo-edit:hover,
.adm-photo-grid .photo-edit:hover {
    border-color: var(--adm-info);
    transform: translateY(-1px);
}

.adm-photo-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--adm-danger);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(20, 48, 81, .18);
}

/* ---------- Options / paiement ---------- */

.adm-subfield {
    margin: 4px 0 4px 4px;
    padding-left: 16px;
    border-left: 2px solid var(--adm-info-soft);
}

.adm-pay-methods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
}

.adm-pay-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 4px 14px;
    border: 1px solid var(--adm-border);
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.adm-pay-badge.is-paypal {
    border-color: #f3c7d5;
    background: #fdf2f6;
    color: #b3004b;
}

.adm-pay-badge.is-stripe {
    border-color: var(--adm-border-strong);
    background: var(--adm-surface-blue);
}

.adm-pay-badge img {
    display: block;
    max-height: 20px;
    width: auto;
}

/* ---------- Fenêtre modale boutique ---------- */

#popup.adm-popup {
    top: 70px; /* hauteur du bandeau .user-menu-container */
    left: 0;
    right: 0;
    bottom: 0;
    /* Pas de padding bas : la barre d'action collante doit pouvoir
       s'ancrer exactement au bord de l'écran (sinon une bande de
       contenu reste visible sous elle). */
    padding: 16px 16px 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: transparent;
    scroll-padding-bottom: 88px;
}

/* Plus aucune hauteur calculée : la fenêtre suit le flux de l'overlay,
   qui défile. Elle ne peut donc jamais déborder de l'écran. */
#popup.adm-popup .adm-modal {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: min(1120px, 100%);
    max-width: none;
    max-height: none;
    margin: 0 auto;
    padding: 22px 22px 18px;
    overflow: visible;
    transform: none;
}

#popup.adm-popup .adm-modal > .adm-stack,
#popup.adm-popup .adm-modal > .adm-stack > .adm-card {
    gap: 14px;
}

#popup.adm-popup .adm-modal textarea {
    max-height: 108px;
}

#popup.adm-popup .adm-photo-grid {
    gap: 10px;
}

#popup.adm-popup .adm-photo-grid .photo-edit {
    width: 76px;
    height: 76px;
}

/* Bloc photos compact : on gagne de la hauteur dans le formulaire. */
#popup.adm-popup .adm-card--photos {
    padding: 10px 14px;
    gap: 8px;
}

#popup.adm-popup .adm-card--photos .adm-card-head {
    align-items: center;
    gap: 10px;
}

#popup.adm-popup .adm-card--photos .adm-card-head > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
}

#popup.adm-popup .adm-card--photos .adm-card-title {
    font-size: 13px;
}

#popup.adm-popup .adm-card--photos .adm-card-text {
    font-size: 11px;
    line-height: 1.3;
}

#popup.adm-popup .adm-card--photos .adm-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
}

#popup.adm-popup .adm-card--photos .adm-photo-grid {
    gap: 8px;
}

#popup.adm-popup .adm-card--photos .photo-edit {
    width: 60px;
    height: 60px;
    border-radius: 10px;
}

.adm-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--adm-border);
    border-radius: 50%;
    background: #fff;
    color: var(--adm-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.adm-modal-close:hover {
    background: var(--adm-danger-soft);
    color: var(--adm-danger);
}

/* Fermeture toujours accessible, même quand la fenêtre défile. */
#popup.adm-popup .adm-modal-close {
    position: fixed;
    top: 90px;
    right: max(42px, calc((100vw - 1120px) / 2 + 26px));
    z-index: 5;
    box-shadow: 0 4px 12px rgba(20, 48, 81, .16);
}

/* Barre d'action du formulaire article : elle reste collée au bas de la
   fenêtre pendant le défilement, pour que « Modifier / Créer » soit
   toujours accessible sans faire défiler tout le formulaire. */
#popup.adm-popup .adm-form-compact > .adm-actions--end {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-left: -22px;
    margin-right: -22px;
    padding: 12px 22px 14px;
    background: #fff;
    border-top: 1px solid var(--adm-border);
    box-shadow: 0 -12px 20px -16px rgba(20, 48, 81, .55);
}

.adm-modal-body > .adm-alert:first-child,
.adm-modal-body > .adm-card-head:first-child {
    margin-top: 0;
}
.adm-filter-note {
    margin: 0 0 10px;
    color: var(--adm-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.adm-loading img {
    max-width: 120px;
    height: auto;
}

/* ---------- Campagnes SMS ---------- */

.adm-sms-page .adm-title i {
    color: var(--adm-info);
    font-size: .78em;
}

.adm-sms-summary {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    margin-bottom: 14px;
}

.adm-sms-summary .adm-kpi {
    min-height: 92px;
}

.adm-sms-loading {
    min-height: 76px;
    margin: 0 0 12px;
    padding: 16px 20px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    background: var(--adm-surface-soft);
}

.adm-sms-unit-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--adm-muted);
    font-size: 12px;
    line-height: 1.5;
}

    .adm-sms-unit-note > i {
        flex: 0 0 auto;
        margin: 2px 0 0;
        color: var(--adm-info);
    }

.adm-sms-layout {
    align-items: start;
    margin-top: 0;
}

.adm-sms-composer,
.adm-sms-phone {
    min-width: 0;
}

.adm-sms-message {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.adm-sms-message textarea {
    min-height: 174px;
    resize: vertical;
}

.adm-sms-emojis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 68px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-sm);
    background: var(--adm-surface-soft);
}

.adm-sms-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}

    .adm-sms-emoji:hover,
    .adm-sms-emoji:focus-visible {
        background: var(--adm-info-soft);
        transform: scale(1.08);
    }

.adm-sms-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--adm-muted);
    font-size: 12px;
}

    .adm-sms-metrics > span {
        padding: 6px 9px;
        border: 1px solid var(--adm-border);
        border-radius: 999px;
        background: var(--adm-surface-soft);
    }

    .adm-sms-metrics strong {
        color: var(--adm-info);
    }

.adm-alert--compact {
    padding: 12px 14px;
    font-size: 13px;
}

.adm-sms-notice p {
    margin: 5px 0 0;
}

.adm-sms-send {
    width: 100%;
    margin-top: 2px;
}

.adm-sms-phone {
    align-self: start;
}

.adm-sms-phone .adm-inline {
    align-items: flex-end;
}

.adm-sms-phone .adm-inline input {
    min-width: 0;
}

.adm-sms-modal {
    width: min(460px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius-lg);
    box-shadow: 0 24px 64px rgba(20, 48, 81, .22);
}

.adm-sms-modal-status,
.adm-sms-modal-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.adm-sms-modal-status {
    color: var(--adm-muted);
    font-size: 13px;
}

.adm-sms-modal-result > span {
    color: var(--adm-text);
    font-size: 14px;
    line-height: 1.5;
}

@media only screen and (max-width: 700px) {
    .adm-sms-page .adm-page-head {
        align-items: flex-start;
        gap: 8px;
        margin: 4px 0 12px;
    }

    .adm-sms-page .adm-page-head .adm-actions,
    .adm-sms-page .adm-page-head .adm-actions > a {
        width: 100%;
    }

    .adm-sms-page .adm-title {
        font-size: 23px;
    }

    .adm-sms-page .adm-subtitle {
        font-size: 13px;
    }

    /* Les indicateurs restent sur une seule bande défilante : le composeur
       et son champ de saisie remontent ainsi immédiatement dans la page. */
    .adm-sms-summary {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 2px;
        overflow-x: auto;
    }

    .adm-sms-summary .adm-kpi {
        flex: 1 0 148px;
        min-height: 72px;
        gap: 8px;
        padding: 11px;
    }

    .adm-sms-summary .adm-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .adm-sms-summary .adm-kpi-value {
        font-size: 20px;
    }

    .adm-sms-summary .adm-kpi-label {
        font-size: 9px;
    }

    .adm-sms-loading {
        min-height: 52px;
        margin-bottom: 8px;
        padding: 10px;
    }

    .adm-sms-unit-note {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .adm-sms-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .adm-sms-composer,
    .adm-sms-phone {
        width: 100%;
        padding: 14px;
    }

    .adm-sms-message textarea {
        min-height: 132px;
    }

    .adm-sms-notice {
        font-size: 12px;
    }

    .adm-sms-notice p {
        margin-top: 4px;
    }

    .adm-sms-send {
        position: sticky;
        bottom: 10px;
        z-index: 3;
        box-shadow: 0 8px 20px rgba(20, 48, 81, .18);
    }

    .adm-sms-modal {
        width: calc(100vw - 24px);
        padding: 18px;
    }
}