/* =============================================================================
 * dolimob-ui.css : système de design Dolimob (Material 3 traduit pour notre stack)
 *
 * Emplacement : /home/dolimob.com/shared/css/dolimob-ui.css
 * Référence   : .doc/dolimob-ui-reference.md (à lire avant toute évolution)
 *
 * Principes :
 *   - Material 3 est notre RÉFÉRENTIEL (rôles, tailles, comportements), pas une librairie.
 *   - Tailwind 2.2 reste l'outil de mise en page (flex, grid, marges, tailles de texte ponctuelles).
 *     Ce fichier apporte ce que Tailwind 2.2 statique ne sait pas faire : tokens (variables CSS),
 *     zones sûres, états tactiles, composants à plusieurs éléments.
 *   - Tout composant est préfixé dm- (ex. .dm-btn, .dm-list-item). Modificateurs : --variante.
 *     États pilotés par JS : .is-active, .is-selected, .is-open, .is-scrolled.
 *   - Couleurs : TOUJOURS via var(--dm-*), jamais de valeur en dur dans un composant.
 *   - Aucune police web : la pile système donne SF Pro sur iOS et Roboto sur Android (natif + hors ligne).
 *
 * Sommaire : 1 Tokens · 2 Base · 3 Typo · 4 Utilitaires · 5 Couche d'état · 6 Boutons · 7 FAB
 *            8 Barre haute · 9 Barre de navigation · 10 Cartes · 11 Listes · 12 Chips et badges
 *            13 Champs · 14 Switch et cases · 15 Segmented · 16 Onglets · 17 Bandeau
 *            18 Feuille et dialogue · 19 Snackbar · 20 Progression et squelettes · 21 État vide
 *
 * v1.1.0 (2026-10-29) : .dm-page--fab, boutons text/outlined désactivés, snackbar au-dessus des plein écrans
 * v1.0.0 (2026-10-29) : création
 * ========================================================================== */

/* =============================================================================
 * 1. TOKENS
 * Noms alignés sur les rôles M3 (primary, on-primary, primary-container, surface...).
 * Rôles ajoutés par Dolimob (absents de M3) : success, warning, info.
 * ========================================================================== */
:root {
    /* --- Couleurs : rôles M3 --- */
    --dm-primary:                 #2563eb;   /* = Tailwind blue-600 : cohabitation avec l'existant */
    --dm-on-primary:              #ffffff;
    --dm-primary-container:       #dbe6fe;
    --dm-on-primary-container:    #0b2a6b;

    --dm-secondary:               #4e5d78;
    --dm-on-secondary:            #ffffff;
    --dm-secondary-container:     #dde3f0;
    --dm-on-secondary-container:  #18233a;

    --dm-error:                   #b3261e;
    --dm-on-error:                #ffffff;
    --dm-error-container:         #fbe1de;
    --dm-on-error-container:      #410e0b;

    /* --- Rôles sémantiques Dolimob (même logique : couleur / on / container / on-container) --- */
    --dm-success:                 #18794e;
    --dm-on-success:              #ffffff;
    --dm-success-container:       #d4f3e2;
    --dm-on-success-container:    #06311d;

    --dm-warning:                 #9a5b00;
    --dm-on-warning:              #ffffff;
    --dm-warning-container:       #ffe2b8;
    --dm-on-warning-container:    #2f1a00;

    --dm-info:                    #0b6b8a;
    --dm-on-info:                 #ffffff;
    --dm-info-container:          #cdeefa;
    --dm-on-info-container:       #022633;

    /* --- Surfaces (du plus bas au plus haut) --- */
    --dm-surface:                     #f6f7fb;   /* fond d'écran */
    --dm-surface-container-lowest:    #ffffff;   /* cartes, listes */
    --dm-surface-container-low:       #f1f3f8;
    --dm-surface-container:           #eceef4;   /* barre de navigation */
    --dm-surface-container-high:      #e6e8ef;   /* feuilles, dialogues */
    --dm-surface-container-highest:   #e0e3ea;   /* champs remplis, chips */
    --dm-on-surface:                  #1a1c21;
    --dm-on-surface-variant:          #454852;
    --dm-outline:                     #757884;
    --dm-outline-variant:             #c7cad4;
    --dm-scrim:                       rgba(10, 12, 18, 0.45);
    --dm-inverse-surface:             #2e3036;
    --dm-inverse-on-surface:          #f0f1f6;
    --dm-inverse-primary:             #a9c4ff;

    /* --- Opacités des couches d'état (M3) --- */
    --dm-state-hover:   0.08;
    --dm-state-focus:   0.10;
    --dm-state-pressed: 0.12;

    /* --- Formes (rayons M3) --- */
    --dm-radius-xs:   4px;
    --dm-radius-sm:   8px;
    --dm-radius-md:   12px;
    --dm-radius-lg:   16px;
    --dm-radius-xl:   28px;
    --dm-radius-full: 9999px;

    /* --- Élévation (niveaux M3 0 à 3, ombres douces) --- */
    --dm-elev-1: 0 1px 2px rgba(16, 24, 40, .10), 0 1px 3px 1px rgba(16, 24, 40, .06);
    --dm-elev-2: 0 1px 2px rgba(16, 24, 40, .10), 0 2px 6px 2px rgba(16, 24, 40, .08);
    --dm-elev-3: 0 4px 8px 3px rgba(16, 24, 40, .10), 0 1px 3px rgba(16, 24, 40, .12);

    /* --- Mouvement (courbes et durées M3) --- */
    --dm-ease-standard:    cubic-bezier(.2, 0, 0, 1);
    --dm-ease-decelerate:  cubic-bezier(.05, .7, .1, 1);   /* entrée à l'écran */
    --dm-ease-accelerate:  cubic-bezier(.3, 0, .8, .15);   /* sortie de l'écran */
    --dm-dur-short:  150ms;
    --dm-dur-medium: 300ms;
    --dm-dur-long:   450ms;

    /* --- Dimensions --- */
    --dm-touch:          48px;   /* cible tactile minimale */
    --dm-topbar-h:       56px;
    --dm-navbar-h:       64px;
    --dm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* --- Zones sûres (encoche, barre de geste). Nécessite viewport-fit=cover dans index.php --- */
    --dm-safe-top:    env(safe-area-inset-top, 0px);
    --dm-safe-bottom: env(safe-area-inset-bottom, 0px);
    --dm-safe-left:   env(safe-area-inset-left, 0px);
    --dm-safe-right:  env(safe-area-inset-right, 0px);
}

/* =============================================================================
 * 2. BASE (volontairement non invasive : n'altère pas les écrans existants)
 * ========================================================================== */
[hidden] { display: none !important; }       /* l'attribut hidden doit gagner sur display des composants */
html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;     /* supprime le flash gris au tap (Android, iOS) */
}
a, button, input, select, textarea, label, summary, [role="button"] {
    touch-action: manipulation;                    /* supprime le délai et le zoom au double-tap */
}
/* iOS zoome sur tout champ < 16px au focus : on force 16px sur iOS uniquement */
@supports (-webkit-touch-callout: none) {
    input, select, textarea { font-size: max(16px, 1em); }
}

/* Racine d'application : à poser sur le conteneur principal de l'app */
.dm-app {
    font-family: var(--dm-font);
    background: var(--dm-surface);
    color: var(--dm-on-surface);
    min-height: 100%;
}

/* =============================================================================
 * 3. TYPOGRAPHIE (échelle M3 réduite aux rôles utiles en mobile)
 * ========================================================================== */
.dm-headline-small { font-size: 24px; line-height: 32px; font-weight: 400; }
.dm-title-large    { font-size: 22px; line-height: 28px; font-weight: 500; }
.dm-title-medium   { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: .1px; }
.dm-title-small    { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; }
.dm-body-large     { font-size: 16px; line-height: 24px; }
.dm-body-medium    { font-size: 14px; line-height: 20px; }
.dm-body-small     { font-size: 12px; line-height: 16px; }
.dm-label-large    { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: .1px; }
.dm-label-medium   { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; }
.dm-label-small    { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .5px; }
.dm-text-variant   { color: var(--dm-on-surface-variant); }
.dm-tabular        { font-variant-numeric: tabular-nums; }

/* =============================================================================
 * 4. UTILITAIRES
 * ========================================================================== */
.dm-chrome     { -webkit-user-select: none; user-select: none; }   /* interface : non sélectionnable */
.dm-selectable { -webkit-user-select: text; user-select: text; }   /* données : toujours copiables */
.dm-scroll     { overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.dm-divider    { height: 1px; background: var(--dm-outline-variant); border: 0; margin: 0; }
.dm-page {                                       /* contenu d'un écran */
    padding: 16px calc(16px + var(--dm-safe-right)) 16px calc(16px + var(--dm-safe-left));
}
.dm-page--fab { padding-bottom: 96px; }   /* réserve la place du FAB (la Layout réserve déjà celle de la barre basse) */
.dm-section-title {
    font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    color: var(--dm-on-surface-variant); padding: 16px 4px 8px;
}

/* =============================================================================
 * 5. COUCHE D'ÉTAT (remplace le "ripple" : neutre sur iOS comme sur Android)
 * Un voile de la couleur du texte (currentColor) apparaît au survol / focus / appui.
 * ========================================================================== */
.dm-btn, .dm-icon-btn, .dm-fab, .dm-chip, .dm-list-item--action, .dm-card--action,
.dm-navbar__indicator, .dm-tab, .dm-segmented__btn, .dm-sheet__action {
    position: relative; overflow: hidden; isolation: isolate;
    -webkit-user-select: none; user-select: none; cursor: pointer;
}
.dm-btn::after, .dm-icon-btn::after, .dm-fab::after, .dm-chip::after, .dm-list-item--action::after,
.dm-card--action::after, .dm-navbar__indicator::after, .dm-tab::after, .dm-segmented__btn::after,
.dm-sheet__action::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: currentColor; opacity: 0; pointer-events: none; z-index: -1;
    transition: opacity var(--dm-dur-short) var(--dm-ease-standard);
}
@media (hover: hover) {
    .dm-btn:hover::after, .dm-icon-btn:hover::after, .dm-fab:hover::after, .dm-chip:hover::after,
    .dm-list-item--action:hover::after, .dm-card--action:hover::after, .dm-tab:hover::after,
    .dm-navbar__item:hover .dm-navbar__indicator::after, .dm-segmented__btn:hover::after,
    .dm-sheet__action:hover::after { opacity: var(--dm-state-hover); }
}
.dm-btn:active::after, .dm-icon-btn:active::after, .dm-fab:active::after, .dm-chip:active::after,
.dm-list-item--action:active::after, .dm-card--action:active::after, .dm-tab:active::after,
.dm-navbar__item:active .dm-navbar__indicator::after, .dm-segmented__btn:active::after,
.dm-sheet__action:active::after { opacity: var(--dm-state-pressed); transition-duration: 0ms; }

/* Anneau de focus clavier (accessibilité), invisible au toucher */
.dm-btn:focus-visible, .dm-icon-btn:focus-visible, .dm-fab:focus-visible, .dm-chip:focus-visible,
.dm-list-item--action:focus-visible, .dm-card--action:focus-visible, .dm-tab:focus-visible,
.dm-navbar__item:focus-visible, .dm-segmented__btn:focus-visible, .dm-sheet__action:focus-visible {
    outline: 3px solid var(--dm-primary); outline-offset: 2px;
}

/* =============================================================================
 * 6. BOUTONS : .dm-btn + --filled | --tonal | --outlined | --text | --danger
 * ========================================================================== */
.dm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 24px; border-radius: var(--dm-radius-full);
    font: 600 14px/20px var(--dm-font); letter-spacing: .1px; white-space: nowrap;
    border: 0; background: transparent; color: var(--dm-primary); text-decoration: none;
}
.dm-btn::before { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; right: 0; } /* cible 48px */
.dm-btn--filled   { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-btn--tonal    { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }
.dm-btn--outlined { box-shadow: inset 0 0 0 1px var(--dm-outline); color: var(--dm-primary); }
.dm-btn--text     { padding: 0 12px; }
.dm-btn--danger   { background: var(--dm-error); color: var(--dm-on-error); }
.dm-btn--lg       { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: var(--dm-radius-lg); }
.dm-btn--block    { display: flex; width: 100%; }
.dm-btn > i       { font-size: 16px; }
.dm-btn:disabled, .dm-btn[aria-disabled="true"] {
    background: rgba(26, 28, 33, .12); color: rgba(26, 28, 33, .38); box-shadow: none; pointer-events: none;
}
.dm-btn--text:disabled, .dm-btn--text[aria-disabled="true"] { background: transparent; }
.dm-btn--outlined:disabled { background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 28, 33, .12); }

/* Bouton icône : cible 48px, icône 24px */
.dm-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--dm-touch); height: var(--dm-touch); border-radius: var(--dm-radius-full);
    border: 0; background: transparent; color: var(--dm-on-surface-variant); font-size: 20px;
}
.dm-icon-btn--filled { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-icon-btn--tonal  { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }

/* =============================================================================
 * 7. FAB : action principale de l'écran (une seule par écran)
 * ========================================================================== */
.dm-fab {
    position: fixed; z-index: 30;
    right: calc(16px + var(--dm-safe-right));
    bottom: calc(16px + var(--dm-safe-bottom));
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-width: 56px; height: 56px; padding: 0 16px; border: 0; border-radius: var(--dm-radius-lg);
    background: var(--dm-primary-container); color: var(--dm-on-primary-container);
    font: 600 14px/20px var(--dm-font); box-shadow: var(--dm-elev-3);
    transition: transform var(--dm-dur-medium) var(--dm-ease-standard), opacity var(--dm-dur-short), box-shadow var(--dm-dur-short);
}
.dm-fab > i { font-size: 22px; }
.dm-fab--primary  { background: var(--dm-primary); color: var(--dm-on-primary); }
.dm-fab--extended { padding: 0 20px 0 16px; }
.dm-fab.is-hidden { transform: scale(.6); opacity: 0; pointer-events: none; }
.dm-has-navbar .dm-fab { bottom: calc(var(--dm-navbar-h) + 16px + var(--dm-safe-bottom)); }

/* =============================================================================
 * 8. BARRE HAUTE (top app bar) : sticky, s'élève quand le contenu défile (.is-scrolled)
 * ========================================================================== */
.dm-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 4px;
    min-height: calc(var(--dm-topbar-h) + var(--dm-safe-top));
    padding: var(--dm-safe-top) calc(4px + var(--dm-safe-right)) 0 calc(4px + var(--dm-safe-left));
    background: var(--dm-surface); color: var(--dm-on-surface);
    -webkit-user-select: none; user-select: none;
    transition: background var(--dm-dur-short), box-shadow var(--dm-dur-short);
}
.dm-topbar.is-scrolled { background: var(--dm-surface-container); box-shadow: var(--dm-elev-1); }
.dm-topbar__title {
    flex: 1; min-width: 0; padding: 0 8px;
    font-size: 20px; line-height: 28px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-topbar__title--center { text-align: center; }
.dm-topbar__subtitle { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--dm-on-surface-variant); }
.dm-topbar__actions  { display: flex; align-items: center; }

/* Pastille réseau dans la barre haute */
.dm-net {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin: 0 6px;
    border-radius: var(--dm-radius-full); font: 600 12px/16px var(--dm-font);
    background: var(--dm-success-container); color: var(--dm-on-success-container);
}
.dm-net.is-offline { background: var(--dm-warning-container); color: var(--dm-on-warning-container); }
.dm-net.is-syncing { background: var(--dm-info-container); color: var(--dm-on-info-container); }

/* =============================================================================
 * 9. BARRE DE NAVIGATION BASSE : 2 à 5 destinations, poser .dm-has-navbar sur la racine
 * ========================================================================== */
.dm-navbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: flex; justify-content: space-around;
    height: calc(var(--dm-navbar-h) + var(--dm-safe-bottom));
    padding: 0 var(--dm-safe-right) var(--dm-safe-bottom) var(--dm-safe-left);
    background: var(--dm-surface-container); border-top: 1px solid var(--dm-outline-variant);
    -webkit-user-select: none; user-select: none;
}
.dm-navbar__item {
    position: relative; flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; border: 0; background: transparent; color: var(--dm-on-surface-variant);
    text-decoration: none; cursor: pointer; font-family: var(--dm-font);
}
.dm-navbar__indicator {           /* pilule derrière l'icône (indicateur actif M3) */
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 30px; border-radius: var(--dm-radius-full); font-size: 18px;
    transition: background var(--dm-dur-short) var(--dm-ease-standard);
}
.dm-navbar__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .3px; }
.dm-navbar__item.is-active { color: var(--dm-on-surface); }
.dm-navbar__item.is-active .dm-navbar__indicator { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }
.dm-navbar__badge {               /* compteur (ex. actions en attente de synchro) */
    position: absolute; top: 8px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: var(--dm-radius-full); background: var(--dm-error); color: var(--dm-on-error);
    font: 700 10px/16px var(--dm-font); text-align: center;
}

/* =============================================================================
 * 10. CARTES : --elevated (défaut) | --outlined | --filled | --action (cliquable)
 * ========================================================================== */
.dm-card {
    display: block; border-radius: var(--dm-radius-md); padding: 16px;
    background: var(--dm-surface-container-lowest); color: var(--dm-on-surface); box-shadow: var(--dm-elev-1);
    text-decoration: none;
}
.dm-card--outlined { box-shadow: inset 0 0 0 1px var(--dm-outline-variant); }
.dm-card--filled   { background: var(--dm-surface-container-highest); box-shadow: none; }
.dm-card--flush    { padding: 0; }
.dm-card__header   { display: flex; align-items: flex-start; gap: 12px; }
.dm-card__actions  { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* =============================================================================
 * 11. LISTES : .dm-list > .dm-list-item (__leading, __content, __trailing)
 * ========================================================================== */
.dm-list {
    margin: 0; padding: 0; list-style: none; overflow: hidden;
    background: var(--dm-surface-container-lowest); border-radius: var(--dm-radius-md);
}
.dm-list--inset > .dm-list-item + .dm-list-item { border-top: 1px solid var(--dm-outline-variant); }
.dm-list-item {
    display: flex; align-items: center; gap: 16px; width: 100%;
    min-height: 56px; padding: 8px 16px; text-align: left;
    background: transparent; border: 0; color: var(--dm-on-surface); text-decoration: none; font-family: var(--dm-font);
}
.dm-list-item--two-line   { min-height: 72px; }
.dm-list-item--three-line { min-height: 88px; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.dm-list-item__leading {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--dm-radius-full); font-size: 16px;
    background: var(--dm-primary-container); color: var(--dm-on-primary-container);
}
.dm-list-item__leading--icon  { background: transparent; color: var(--dm-on-surface-variant); font-size: 20px; width: 24px; }
.dm-list-item__leading--thumb { border-radius: var(--dm-radius-sm); width: 56px; height: 56px; overflow: hidden; }
.dm-list-item__content    { flex: 1; min-width: 0; }
.dm-list-item__overline   { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .5px; color: var(--dm-on-surface-variant); }
.dm-list-item__headline   { font-size: 16px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-list-item__supporting {
    font-size: 14px; line-height: 20px; color: var(--dm-on-surface-variant);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-list-item__trailing   { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
                            font-size: 12px; line-height: 16px; color: var(--dm-on-surface-variant); }

/* =============================================================================
 * 12. CHIPS (filtres, saisies) et BADGES (statuts, lecture seule)
 * ========================================================================== */
.dm-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.dm-chips::-webkit-scrollbar { display: none; }
.dm-chip {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
    border-radius: var(--dm-radius-sm); border: 0; background: transparent;
    box-shadow: inset 0 0 0 1px var(--dm-outline-variant); color: var(--dm-on-surface-variant);
    font: 600 14px/20px var(--dm-font);
}
.dm-chip::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; } /* cible 48px */
.dm-chip > i { font-size: 14px; }
.dm-chip.is-selected { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); box-shadow: none; }

.dm-badge {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px;
    border-radius: var(--dm-radius-full); font: 600 12px/16px var(--dm-font); white-space: nowrap;
    background: var(--dm-surface-container-highest); color: var(--dm-on-surface-variant);
}
.dm-badge > i { font-size: 11px; }
.dm-badge--primary { background: var(--dm-primary-container); color: var(--dm-on-primary-container); }
.dm-badge--success { background: var(--dm-success-container); color: var(--dm-on-success-container); }
.dm-badge--warning { background: var(--dm-warning-container); color: var(--dm-on-warning-container); }
.dm-badge--error   { background: var(--dm-error-container);   color: var(--dm-on-error-container); }
.dm-badge--info    { background: var(--dm-info-container);    color: var(--dm-on-info-container); }

/* =============================================================================
 * 13. CHAMPS (outlined M3, libellé flottant en CSS pur)
 * <div class="dm-field"><input class="dm-field__input" id="x" placeholder=" ">
 *   <label class="dm-field__label" for="x">Libellé</label><div class="dm-field__support">Aide</div></div>
 * Le placeholder " " (espace) est OBLIGATOIRE : il active :placeholder-shown.
 * ========================================================================== */
.dm-field { position: relative; display: block; }
.dm-field__input {
    display: block; width: 100%; min-height: 56px; padding: 16px; margin: 0;
    font: 16px/24px var(--dm-font); color: var(--dm-on-surface);
    background: var(--dm-surface-container-lowest); border: 1px solid var(--dm-outline);
    border-radius: var(--dm-radius-xs); outline: none; -webkit-appearance: none; appearance: none;
    transition: border-color var(--dm-dur-short), box-shadow var(--dm-dur-short);
}
textarea.dm-field__input { min-height: 112px; resize: vertical; }
select.dm-field__input {
    padding-right: 44px;
    background-image: linear-gradient(45deg, transparent 50%, var(--dm-on-surface-variant) 50%),
                      linear-gradient(135deg, var(--dm-on-surface-variant) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px; background-repeat: no-repeat;
}
.dm-field__input:focus { border-color: var(--dm-primary); box-shadow: inset 0 0 0 1px var(--dm-primary); }
.dm-field__label {
    position: absolute; left: 12px; top: 16px; padding: 0 4px; max-width: calc(100% - 24px);
    font: 16px/24px var(--dm-font); color: var(--dm-on-surface-variant); pointer-events: none;
    background: var(--dm-surface-container-lowest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform-origin: left top;
    transition: transform var(--dm-dur-short) var(--dm-ease-standard), color var(--dm-dur-short);
}
.dm-field__input:focus + .dm-field__label,
.dm-field__input:not(:placeholder-shown) + .dm-field__label,
select.dm-field__input + .dm-field__label,
.dm-field--date .dm-field__label { transform: translateY(-26px) scale(.75); }
.dm-field__input:focus + .dm-field__label { color: var(--dm-primary); }
.dm-field__input::placeholder { color: transparent; }
.dm-field__input:focus::placeholder { color: var(--dm-on-surface-variant); }
.dm-field__support { padding: 4px 16px 0; font-size: 12px; line-height: 16px; color: var(--dm-on-surface-variant); }
.dm-field--error .dm-field__input { border-color: var(--dm-error); box-shadow: inset 0 0 0 1px var(--dm-error); }
.dm-field--error .dm-field__label, .dm-field--error .dm-field__support { color: var(--dm-error); }
.dm-field__input:disabled { opacity: .5; }
.dm-form { display: flex; flex-direction: column; gap: 20px; padding-top: 10px; }   /* place pour le libellé flottant */

/* =============================================================================
 * 14. SWITCH et CASES À COCHER
 * Switch : <label class="dm-switch-row"><span>Libellé</span><input type="checkbox" class="dm-switch"></label>
 * Cases et radios : natives, simplement colorées (.dm-check), rendu natif sur chaque OS.
 * ========================================================================== */
.dm-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 56px; padding: 8px 16px; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.dm-switch {
    position: relative; flex: none; width: 52px; height: 32px; margin: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none; border-radius: var(--dm-radius-full);
    background: var(--dm-surface-container-highest); box-shadow: inset 0 0 0 2px var(--dm-outline);
    transition: background var(--dm-dur-short), box-shadow var(--dm-dur-short);
}
.dm-switch::before {
    content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px;
    border-radius: var(--dm-radius-full); background: var(--dm-outline);
    transition: transform var(--dm-dur-medium) var(--dm-ease-standard), width var(--dm-dur-short),
                height var(--dm-dur-short), top var(--dm-dur-short), left var(--dm-dur-short), background var(--dm-dur-short);
}
.dm-switch:checked { background: var(--dm-primary); box-shadow: none; }
.dm-switch:checked::before { top: 4px; left: 4px; width: 24px; height: 24px; background: var(--dm-on-primary); transform: translateX(20px); }
.dm-switch:focus-visible { outline: 3px solid var(--dm-primary); outline-offset: 2px; }
.dm-check { width: 20px; height: 20px; margin: 0; accent-color: var(--dm-primary); flex: none; }

/* =============================================================================
 * 15. BOUTONS SEGMENTÉS : filtre à choix unique (2 à 4 options)
 * ========================================================================== */
.dm-segmented { display: flex; width: 100%; height: 40px; border-radius: var(--dm-radius-full);
                box-shadow: inset 0 0 0 1px var(--dm-outline); overflow: hidden; }
.dm-segmented__btn {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 8px; border: 0; background: transparent; color: var(--dm-on-surface);
    font: 600 14px/20px var(--dm-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-segmented__btn + .dm-segmented__btn { box-shadow: inset 1px 0 0 var(--dm-outline); }
.dm-segmented__btn.is-selected { background: var(--dm-secondary-container); color: var(--dm-on-secondary-container); }
.dm-segmented__check { display: none; font-size: 12px; }
.dm-segmented__btn.is-selected .dm-segmented__check { display: inline; }

/* =============================================================================
 * 16. ONGLETS (primary tabs M3) : défilables si trop nombreux
 * ========================================================================== */
.dm-tabs {
    display: flex; overflow-x: auto; scrollbar-width: none;
    background: var(--dm-surface); border-bottom: 1px solid var(--dm-outline-variant);
}
.dm-tabs::-webkit-scrollbar { display: none; }
.dm-tab {
    flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--dm-touch); padding: 0 16px; border: 0; background: transparent;
    color: var(--dm-on-surface-variant); font: 600 14px/20px var(--dm-font); white-space: nowrap;
}
.dm-tab.is-active { color: var(--dm-primary); }
.dm-tab.is-active > span { position: relative; }
.dm-tab.is-active > span::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 3px;
    border-radius: 3px 3px 0 0; background: var(--dm-primary);
}
.dm-tab__count {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--dm-radius-full);
    background: var(--dm-surface-container-highest); color: var(--dm-on-surface-variant); font-size: 11px; line-height: 18px;
}

/* =============================================================================
 * 17. BANDEAU (banner) : information persistante en haut d'écran (hors ligne, sync)
 * ========================================================================== */
.dm-banner {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--dm-radius-md);
    background: var(--dm-surface-container-high); color: var(--dm-on-surface); font-size: 14px; line-height: 20px;
}
.dm-banner > i { font-size: 18px; line-height: 20px; flex: none; }
.dm-banner__body { flex: 1; min-width: 0; }
.dm-banner--warning { background: var(--dm-warning-container); color: var(--dm-on-warning-container); }
.dm-banner--error   { background: var(--dm-error-container);   color: var(--dm-on-error-container); }
.dm-banner--info    { background: var(--dm-info-container);    color: var(--dm-on-info-container); }
.dm-banner--success { background: var(--dm-success-container); color: var(--dm-on-success-container); }

/* =============================================================================
 * 18. FEUILLE BASSE (bottom sheet, à privilégier en mobile) et DIALOGUE
 * Ouverture : ajouter .is-open sur .dm-scrim ET sur .dm-sheet / .dm-dialog.
 * Bouton retour Android : voir la référence (history.pushState à l'ouverture).
 * ========================================================================== */
.dm-scrim {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40; background: var(--dm-scrim);
    opacity: 0; visibility: hidden; transition: opacity var(--dm-dur-medium) var(--dm-ease-standard), visibility 0s linear var(--dm-dur-medium);
}
.dm-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.dm-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 90vh; margin: 0 auto; max-width: 640px;
    display: flex; flex-direction: column;
    padding: 0 calc(16px + var(--dm-safe-right)) calc(16px + var(--dm-safe-bottom)) calc(16px + var(--dm-safe-left));
    background: var(--dm-surface-container-low); color: var(--dm-on-surface);
    border-radius: var(--dm-radius-xl) var(--dm-radius-xl) 0 0; box-shadow: var(--dm-elev-3);
    transform: translateY(105%); visibility: hidden;
    transition: transform var(--dm-dur-medium) var(--dm-ease-accelerate), visibility 0s linear var(--dm-dur-medium);
}
.dm-sheet.is-open {
    transform: translateY(0); visibility: visible; transition-delay: 0s;
    transition-timing-function: var(--dm-ease-decelerate);
}
.dm-sheet__handle { width: 32px; height: 4px; margin: 16px auto 8px; border-radius: 2px; background: var(--dm-outline); opacity: .6; flex: none; }
.dm-sheet__title  { padding: 8px 8px 12px; font-size: 16px; line-height: 24px; font-weight: 600; }
.dm-sheet__body   { overflow-y: auto; overscroll-behavior: contain; }
.dm-sheet__action {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 0 16px;
    border: 0; border-radius: var(--dm-radius-md); background: transparent; color: var(--dm-on-surface);
    font: 16px/24px var(--dm-font); text-align: left; text-decoration: none;
}
.dm-sheet__action > i { width: 24px; text-align: center; font-size: 18px; color: var(--dm-on-surface-variant); }
.dm-sheet__action--danger, .dm-sheet__action--danger > i { color: var(--dm-error); }

.dm-dialog {
    position: fixed; z-index: 50; top: 50%; left: 50%; width: calc(100% - 48px); max-width: 400px;
    max-height: calc(100% - 48px - var(--dm-safe-top) - var(--dm-safe-bottom)); overflow-y: auto;
    padding: 24px; border-radius: var(--dm-radius-xl);
    background: var(--dm-surface-container-high); color: var(--dm-on-surface); box-shadow: var(--dm-elev-3);
    opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(.96);
    transition: opacity var(--dm-dur-short), transform var(--dm-dur-medium) var(--dm-ease-decelerate), visibility 0s linear var(--dm-dur-medium);
}
.dm-dialog.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
.dm-dialog__icon     { text-align: center; font-size: 24px; color: var(--dm-secondary); margin-bottom: 16px; }
.dm-dialog__title    { font-size: 22px; line-height: 28px; margin-bottom: 16px; }
.dm-dialog__icon + .dm-dialog__title { text-align: center; }
.dm-dialog__body     { font-size: 14px; line-height: 20px; color: var(--dm-on-surface-variant); }
.dm-dialog__actions  { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

/* =============================================================================
 * 19. SNACKBAR : retour court après une action (remplaçant visuel de Toast)
 * ========================================================================== */
.dm-snackbar {
    position: fixed; z-index: 80; left: calc(16px + var(--dm-safe-left)); right: calc(16px + var(--dm-safe-right));
    bottom: calc(16px + var(--dm-safe-bottom)); max-width: 560px; margin: 0 auto;
    display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px 6px 16px;
    border-radius: var(--dm-radius-xs); background: var(--dm-inverse-surface); color: var(--dm-inverse-on-surface);
    font-size: 14px; line-height: 20px; box-shadow: var(--dm-elev-3);
    opacity: 0; transform: translateY(16px); pointer-events: none;
    transition: opacity var(--dm-dur-short), transform var(--dm-dur-medium) var(--dm-ease-decelerate);
}
.dm-snackbar.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dm-has-navbar .dm-snackbar { bottom: calc(var(--dm-navbar-h) + 16px + var(--dm-safe-bottom)); }
.dm-snackbar__text   { flex: 1; min-width: 0; }
.dm-snackbar .dm-btn { color: var(--dm-inverse-primary); }

/* =============================================================================
 * 20. PROGRESSION et SQUELETTES (chargement sans saut de mise en page)
 * ========================================================================== */
.dm-progress { position: relative; height: 4px; overflow: hidden; background: var(--dm-primary-container); border-radius: 2px; }
.dm-progress__bar { height: 100%; background: var(--dm-primary); border-radius: 2px; transition: width var(--dm-dur-medium); }
.dm-progress--indeterminate .dm-progress__bar {
    position: absolute; width: 40%; animation: dm-indeterminate 1.4s var(--dm-ease-standard) infinite;
}
@keyframes dm-indeterminate { 0% { left: -40%; } 100% { left: 100%; } }

.dm-spinner {
    display: inline-block; width: 24px; height: 24px; border-radius: 50%;
    border: 3px solid var(--dm-primary-container); border-top-color: var(--dm-primary);
    animation: dm-spin .8s linear infinite;
}
@keyframes dm-spin { to { transform: rotate(360deg); } }

.dm-skeleton {
    display: block; border-radius: var(--dm-radius-xs); color: transparent;
    background: linear-gradient(90deg, var(--dm-surface-container-high) 25%, var(--dm-surface-container-low) 50%, var(--dm-surface-container-high) 75%);
    background-size: 200% 100%; animation: dm-shimmer 1.4s ease-in-out infinite;
}
.dm-skeleton--text   { height: 14px; margin: 4px 0; }
.dm-skeleton--circle { border-radius: 50%; }
@keyframes dm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =============================================================================
 * 21. ÉTAT VIDE
 * ========================================================================== */
.dm-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 24px; text-align: center; }
.dm-empty > i { font-size: 40px; color: var(--dm-outline); margin-bottom: 8px; }
.dm-empty__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.dm-empty__text  { font-size: 14px; line-height: 20px; color: var(--dm-on-surface-variant); max-width: 280px; }

/* Mouvement réduit : on coupe animations et transitions longues */
@media (prefers-reduced-motion: reduce) {
    [class*="dm-"], [class*="dm-"]::before, [class*="dm-"]::after {
        animation-duration: 1ms !important; animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}