/* Styles propres aux pages de Diane. Mêmes jetons que le reste (css/diane-tokens.css), aucune couleur en dur sauf la page signaleur (contraste maximal, voulu). */

/* ---------- mises en page génériques ---------- */

.dn-stack { display: flex; flex-direction: column; gap: 20px; }
.dn-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dn-form { display: flex; flex-direction: column; gap: 16px; }
.dn-form__legend { margin: 0 0 4px; font-size: .95rem; font-weight: 700; }
.dn-form__help { margin: 0 0 10px; color: var(--dn-text-2); font-size: .85rem; }
.dn-prose { margin: 0 0 14px; color: var(--dn-text); line-height: 1.55; }
.dn-help { margin: 6px 0 14px; color: var(--dn-text-2); font-size: .82rem; line-height: 1.45; }
.dn-help .dn-code { color: var(--dn-text); }
.dn-defs { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 18px 0 0; }
.dn-defs dt { color: var(--dn-text-2); font-size: .85rem; font-weight: 600; }
.dn-defs dd { margin: 0; font-weight: 600; }
.dn-profile { display: flex; align-items: center; gap: 16px; }
.dn-profile__text { display: flex; flex-direction: column; min-width: 0; }
.dn-profile__name { font-size: 1.15rem; }
.dn-profile__text .dn-muted { overflow-wrap: anywhere; }

@media (max-width: 899px) { .dn-two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- liste des événements ---------- */

.dn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.dn-toolbar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 18px; }
.dn-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px; padding: 0 12px; min-height: 42px;
    border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius-pill); background: var(--dn-surface); color: var(--dn-text-2);
}
.dn-search:focus-within { border-color: var(--dn-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-focus) 25%, transparent); }
.dn-search__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dn-text); font: inherit; padding: 8px 0; }
.dn-search__input::placeholder { color: var(--dn-text-2); }
.dn-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.dn-filter {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 14px; cursor: pointer; font: inherit; font-weight: 600; font-size: .88rem;
    border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius-pill); background: var(--dn-surface); color: var(--dn-text);
}
.dn-filter:hover { background: var(--dn-surface-3); }
.dn-filter.is-on { background: var(--dn-accent); border-color: var(--dn-accent); color: var(--dn-on-accent); }
.dn-filter__count { opacity: .75; font-weight: 700; }

.dn-event {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px;
    background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-1);
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.dn-event:hover { box-shadow: var(--dn-shadow-2); border-color: var(--dn-border-strong); transform: translateY(-1px); }
.dn-event.is-live { border-color: color-mix(in srgb, var(--dn-state-waiting) 55%, var(--dn-border)); }
.dn-event.is-live::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--dn-radius-lg) var(--dn-radius-lg) 0 0; background: var(--dn-state-waiting); }
.dn-event__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.dn-event__menu { position: relative; z-index: 2; }
.dn-event__name { margin: 6px 0 0; font-size: 1.15rem; line-height: 1.3; font-weight: 700; }
.dn-event__open {
    all: unset; cursor: pointer; color: var(--dn-text); overflow-wrap: anywhere;
}
.dn-event__open::after { content: ""; position: absolute; inset: 0; border-radius: var(--dn-radius-lg); } /* toute la carte ouvre l'événement */
.dn-event__open:focus-visible { outline: 3px solid var(--dn-focus); outline-offset: 3px; border-radius: 6px; }
.dn-event__open:focus-visible::after { outline: 3px solid var(--dn-focus); outline-offset: 2px; }
.dn-event__date { margin: 0; color: var(--dn-text-2); font-size: .8rem; }
.dn-event__desc { margin: 4px 0 0; color: var(--dn-text-2); font-size: .88rem; overflow-wrap: anywhere; }
.dn-event__hint { margin: 10px 0 0; color: var(--dn-text-2); font-size: .88rem; }
.dn-event__facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--dn-text-2); }
.dn-event__facts li { display: inline-flex; align-items: center; gap: 5px; }
.dn-event__facts b { color: var(--dn-text); }
.dn-event__review { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 5px; font-size: .85rem; font-weight: 700; color: var(--mud-palette-warning); }
.dn-event__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dn-event__action { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--dn-accent-text); }
.dn-event:hover .dn-event__action .mud-icon-root { transform: translateX(3px); }
.dn-event__action .mud-icon-root { transition: transform .15s; }
.dn-event__progress { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 0 0 90px; }
.dn-event__progress li { flex: 1; height: 6px; border-radius: 3px; background: var(--dn-surface-3); }
.dn-event__progress li.is-done { background: var(--dn-state-inplace); }
.dn-event__progress li.is-live { background: var(--dn-state-waiting); animation: dn-blink 1.4s ease-in-out infinite; }

.dn-onboarding > .dn-panel__body { padding: 28px 28px 30px; }
.dn-onboarding__title { margin: 0 0 18px; font-size: 1.3rem; font-weight: 750; letter-spacing: -.01em; }
.dn-onboarding__steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.dn-onboarding__steps li { display: flex; gap: 14px; align-items: flex-start; }
.dn-onboarding__steps p { margin: 4px 0 0; color: var(--dn-text-2); font-size: .9rem; }
.dn-onboarding__num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dn-accent); color: var(--dn-on-accent); font-weight: 800; }
@media (max-width: 899px) { .dn-onboarding__steps { grid-template-columns: minmax(0, 1fr); } .dn-onboarding > .dn-panel__body { padding: 20px; } }

/* ---------- membres ---------- */

.dn-invite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: center; }
.dn-member { display: inline-flex; align-items: center; gap: 10px; }
.dn-flat-table.mud-table { border: 0; box-shadow: none; border-radius: 0 0 var(--dn-radius-lg) var(--dn-radius-lg); background: transparent; }
.dn-flat-table .mud-select .mud-input-control { min-width: 150px; }
@media (max-width: 899px) { .dn-invite { grid-template-columns: minmax(0, 1fr); } }

/* ---------- espace de travail ---------- */

.dn-workspace { display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - var(--dn-topbar-h) - 30px); min-height: 560px; }
.dn-workspace__head { display: flex; flex-direction: column; gap: 12px; }
.dn-workspace__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; }
.dn-workspace__map {
    position: relative; min-height: 0; overflow: hidden; background: var(--dn-surface-3);
    border: 1px solid var(--dn-border); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-1);
}
.dn-workspace__map .diane-map { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.dn-workspace__side { min-height: 0; min-width: 0; display: flex; flex-direction: column; }

.dn-map-note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 600; max-width: 560px; }
.dn-map-note--center { inset: 0; display: grid; place-items: center; max-width: none; background: color-mix(in srgb, var(--dn-bg) 70%, transparent); backdrop-filter: blur(2px); }
.dn-map-note--center .dn-empty { max-width: 460px; background: var(--dn-surface); box-shadow: var(--dn-shadow-2); }
.dn-map-note .dn-callout { background: color-mix(in srgb, var(--dn-surface) 94%, var(--tone)); box-shadow: var(--dn-shadow-2); }

.dn-codechip {
    display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 14px; cursor: pointer; color: var(--dn-text);
    border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius-pill); background: var(--dn-surface); font: inherit;
}
.dn-codechip:hover { background: var(--dn-surface-3); }
.dn-codechip__label { color: var(--dn-text-2); font-size: .8rem; font-weight: 600; }

.dn-side { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-1); overflow: hidden; }
.dn-side__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dn-border); }
.dn-side__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; }
.dn-side__sub { margin: 20px 0 8px; font-size: .95rem; font-weight: 700; }
.dn-side__meta { color: var(--dn-text-2); font-size: .78rem; }
.dn-side__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; overscroll-behavior: contain; }
.dn-side__foot { flex: 0 0 auto; padding: 12px 18px; border-top: 1px solid var(--dn-border); background: var(--dn-surface-2); display: flex; flex-direction: column; gap: 10px; }
.dn-side__foot--stack { gap: 8px; }
.dn-side__foot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-side__foot-actions > * { flex: 1 1 auto; }
.dn-live-dot { color: var(--dn-state-waiting); }

.dn-savebar { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.dn-savebar__state { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--dn-text-2); font-weight: 600; }
.dn-savebar__state.is-dirty { color: var(--mud-palette-warning); }
.dn-savebar__state .mud-icon-root { font-size: .9rem; }

.dn-file { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--dn-border); border-radius: var(--dn-radius); background: var(--dn-surface-2); }
.dn-file__icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--dn-state-inplace) 16%, transparent); color: var(--dn-state-inplace); }
.dn-file__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dn-file__text strong { overflow-wrap: anywhere; }
.dn-file__text span { color: var(--dn-text-2); font-size: .82rem; }

.dn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dn-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 11px; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700;
    border-radius: var(--dn-radius-pill); border: 1.5px solid var(--chip, var(--dn-border-strong)); background: transparent; color: var(--dn-text);
}
.dn-chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 1px var(--dn-surface), 0 0 0 2px var(--chip); }
.dn-chip.is-on { background: color-mix(in srgb, var(--chip) 16%, var(--dn-surface)); }
.dn-chip:not(.is-on) { opacity: .6; border-style: dashed; }
.dn-chip:not(.is-on) .dn-chip__dot { background: transparent; }
.dn-chip--review { --chip: var(--mud-palette-warning); }
.dn-chip--review .mud-icon-root { font-size: 1rem; color: var(--mud-palette-warning); }

.dn-editor {
    display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 14px;
    border: 1.5px solid var(--dn-select); border-radius: var(--dn-radius); background: var(--dn-select-soft);
}
.dn-editor .mud-input-control { background: var(--dn-surface); border-radius: var(--dn-radius-sm); }
.dn-editor__head { display: flex; align-items: center; gap: 10px; }
.dn-editor__title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.dn-editor__title span { color: var(--dn-text-2); font-size: .78rem; overflow-wrap: anywhere; }
.dn-editor__row { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-editor__row--end { justify-content: flex-end; }
.dn-editor .dn-help { margin: 0; }

.dn-list--boxed { border: 1px solid var(--dn-border); border-radius: var(--dn-radius); overflow: hidden; background: var(--dn-surface); }

.dn-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

@media (max-width: 1199px) { .dn-workspace__body { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 899px) {
    .dn-workspace { height: auto; min-height: 0; }
    .dn-workspace__body { grid-template-columns: minmax(0, 1fr); }
    .dn-workspace__map { height: 58dvh; min-height: 380px; }
    .dn-side { overflow: visible; }
    .dn-side__scroll { overflow: visible; }
    .dn-side__foot:has(.dn-savebar) { position: sticky; bottom: var(--dn-tabbar-h); z-index: 5; box-shadow: 0 -6px 16px rgba(0, 0, 0, .12); } /* l'enregistrement reste à portée du pouce */
}

/* ---------- suivi des traitements longs (JobProgressPanel) ---------- */

.job-overlay { position: fixed; inset: 0; z-index: 9000; background: var(--mud-palette-overlay-dark, rgba(7, 13, 26, .6)); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.job-card { width: min(540px, 100%); max-height: 100%; overflow-y: auto; padding: 26px; background: var(--dn-surface); color: var(--dn-text); border: 1px solid var(--dn-border); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-3); }
.job-head { display: flex; align-items: center; gap: 20px; }
.job-ring { position: relative; flex: 0 0 auto; width: 84px; height: 84px; display: grid; place-items: center; }
.job-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 4px solid var(--dn-surface-3); } /* piste : visible même à 0 % */
.job-ring .mud-progress-circular { position: relative; width: 84px; height: 84px; }
.job-ring-value { position: absolute; font-size: 1.35rem; font-weight: 800; }
.job-ring-value small { font-size: .7rem; font-weight: 700; opacity: .7; margin-left: 1px; }
.job-titles { min-width: 0; }
.job-title { font-size: 1.2rem; font-weight: 750; }
.job-subtitle { font-size: .86rem; color: var(--dn-text-2); margin-top: 2px; overflow-wrap: anywhere; }
.job-current { margin-top: 8px; font-size: .95rem; font-weight: 600; }
.job-elapsed { font-size: .82rem; color: var(--dn-text-2); }
.job-steps { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--dn-border); display: grid; gap: 10px; }
.job-step { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.job-step-done { color: var(--dn-text-2); }
.job-step-pending { color: var(--dn-text-2); opacity: .75; }
.job-step-current { font-weight: 700; }
.job-hint { margin-top: 16px; font-size: .82rem; color: var(--dn-text-2); }
.job-compact { margin-top: 6px; }
.job-compact-head { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; margin-bottom: 4px; }
.job-percent-small { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- pages sans session : connexion, invitation ---------- */

/* Trois zones : l'en-tête de marque sur toute la largeur, puis deux blocs de même hauteur côte à côte (présentation, formulaire). */
.dn-public {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100dvh;
    /* un seul fond continu pour toute la page : aucune coupure entre la présentation et le formulaire */
    background:
        radial-gradient(1100px 700px at 0% 100%, var(--dn-glow-1), transparent 65%),
        radial-gradient(1100px 700px at 100% 0%, var(--dn-glow-2), transparent 65%),
        linear-gradient(160deg, var(--dn-bg-from), var(--dn-bg-to)),
        var(--dn-bg);
}
/* Page d'invitation : invisible tant que les couleurs et le logo de l'organisation ne sont pas arrivés, puis elle apparaît en fondu (aucun saut de couleurs). */
.dn-public { transition: opacity .4s ease; }
.dn-public--pending { opacity: 0; visibility: hidden; }
.dn-public__brand {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; height: 80px; padding: 0 44px;
    /* même couleur (et même dégradé) que le menu une fois connecté : la marque est la même avant et après la connexion */
    background: linear-gradient(90deg, var(--dn-rail-from), var(--dn-rail-to)); color: var(--dn-rail-text-strong);
    border-bottom: 1px solid var(--dn-border);
}
.dn-public__brand .dn-wordmark--lg { color: var(--dn-rail-text-strong); }
/* les deux blocs se rejoignent près de l'axe central et grandissent avec l'écran : pas de grand vide au milieu sur un écran large */
.dn-public__aside { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 40px 48px 40px 44px; color: var(--dn-text); }
.dn-public__pitch { width: 100%; max-width: clamp(460px, 31vw, 620px); position: relative; z-index: 1; }
.dn-public__pitch h2 { margin: 0 0 22px; font-size: clamp(2rem, 2.6vw, 3.1rem); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--dn-text); }
.dn-public__pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--dn-text-soft); font-size: clamp(.95rem, 1.1vw, 1.2rem); }
.dn-public__pitch li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.dn-public__pitch li .mud-icon-root { color: var(--dn-accent-text); margin-top: 2px; }
.dn-overline { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 800; color: var(--dn-accent-text); }

.dn-public__main { display: flex; align-items: center; justify-content: flex-start; padding: 40px 24px 40px 48px; outline: none; }
.dn-public__card {
    width: min(clamp(460px, 31vw, 620px), 100%); padding: 32px; background: var(--dn-surface);
    border: 1px solid var(--dn-border); border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-2);
}
.dn-auth__lead a { color: var(--dn-accent-text); font-weight: 700; }

.dn-auth__title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.dn-auth__lead { margin: 0 0 22px; color: var(--dn-text-2); line-height: 1.5; }
.dn-auth__lead p { margin: 0 0 8px; }
.dn-auth__role { display: flex; align-items: center; gap: 8px; }

.dn-meter { height: 4px; margin: 6px 2px 0; border-radius: 2px; background: var(--dn-surface-3); overflow: hidden; }
.dn-meter__bar { display: block; height: 100%; background: var(--dn-state-problem); transition: width .15s, background .15s; }
.dn-meter__bar.is-ok { background: var(--dn-state-inplace); }

/* Écran peu haut (ordinateur portable) : espaces resserrés pour que la page d'invitation, la plus longue, tienne sans défiler. */
@media (min-width: 960px) and (max-height: 780px) {
    .dn-public__brand { height: 64px; }
    .dn-public__main, .dn-public__aside { padding-top: 20px; padding-bottom: 20px; }
    .dn-public__card { padding: 22px 28px; }
    .dn-auth__title { font-size: 1.4rem; }
    .dn-auth__lead { margin-bottom: 14px; }
    .dn-auth__lead p { margin-bottom: 6px; }
    .dn-public__card .dn-form { gap: 10px; }
}
/* Très peu haut : on resserre encore (champs plus compacts, texte d'aide réduit). */
@media (min-width: 960px) and (max-height: 640px) {
    .dn-public__brand { height: 56px; }
    .dn-public__main, .dn-public__aside { padding-top: 12px; padding-bottom: 12px; }
    .dn-public__card { padding: 16px 24px; }
    .dn-public__card .mud-input-helper-text { font-size: .7rem; line-height: 1.2; }
}

@media (max-width: 959px) {
    .dn-public { grid-template-columns: minmax(0, 1fr); }
    .dn-public__brand { height: 64px; padding: 0 16px; }
    .dn-public__brand .dn-wordmark--lg { font-size: 1.1rem; }
    .dn-public__aside { display: none; }
    .dn-public__main { align-items: center; justify-content: space-evenly; padding: 20px 16px 32px; }
    .dn-public__card { padding: 24px 20px; }
}

/* ---------- page signaleur : téléphone, en extérieur, extérieur ---------- */
/* Thème sombre comme le reste de l'application, fort contraste (texte blanc sur fond presque noir, boutons pleins), cibles tactiles ≥ 64 px, texte ≥ 18 px. */

.dn-field {
    min-height: 100dvh; display: flex; flex-direction: column; background: #060a14; color: #ffffff;
    font-size: 1.125rem; line-height: 1.45;
}
.dn-field__bar {
    display: flex; align-items: center; gap: 12px; padding: 12px 18px; padding-top: max(12px, env(safe-area-inset-top));
    background: #0b1220; color: #ffffff; border-bottom: 1px solid #25344f;
}
.dn-field__title { font-weight: 800; font-size: 1.15rem; }
.dn-field__title span { font-weight: 600; opacity: .85; }
.dn-field__main { flex: 1 1 auto; width: min(520px, 100%); margin: 0 auto; padding: 22px 18px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; outline: none; }
.dn-field__h1 { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.dn-field__lead { margin: 0 0 6px; font-size: 1.1rem; color: #c9d5ea; }

.dn-ffield { display: flex; flex-direction: column; gap: 6px; }
.dn-ffield label { font-weight: 800; font-size: 1.05rem; }
.dn-finput {
    width: 100%; min-height: 64px; padding: 10px 16px; font: 700 1.7rem/1.2 var(--dn-mono); letter-spacing: .14em; text-transform: uppercase;
    color: #ffffff; background: #0e1829; border: 3px solid #8fa3c4; border-radius: 14px;
}
.dn-finput:focus { outline: 4px solid #8fb0ff; outline-offset: 2px; border-color: #ffffff; }
.dn-finput--area { min-height: 100px; font: 600 1.1rem/1.4 var(--dn-font); letter-spacing: 0; text-transform: none; resize: vertical; }

.dn-fbtn {
    width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; cursor: pointer;
    font: 800 1.35rem/1.2 var(--dn-font); border-radius: 18px; border: 3px solid transparent; text-align: center; -webkit-tap-highlight-color: transparent;
}
.dn-fbtn .mud-icon-root { font-size: 2rem; width: 2rem; height: 2rem; }
.dn-fbtn:active:not(:disabled) { transform: scale(.985); }
.dn-fbtn:disabled { opacity: .45; cursor: not-allowed; }
.dn-fbtn--ok { background: #3ddc84; color: #04170c; border-color: #b7f5d0; }
.dn-fbtn--problem { background: #ff6b6b; color: #1f0606; border-color: #ffc2c2; }
.dn-fbtn--problem-outline { background: transparent; color: #fbbf24; border-color: #fbbf24; }
.dn-fbtn:focus-visible { outline: 4px solid #8fb0ff; outline-offset: 3px; }

.dn-flink { align-self: center; min-height: 52px; padding: 8px 16px; background: none; border: 0; color: #9ec0ff; font: 700 1.05rem var(--dn-font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.dn-fstatus { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 18px; border-radius: 22px; border: 3px solid; }
.dn-fstatus.is-ok { background: rgba(61, 220, 132, .12); border-color: #3ddc84; color: #ffffff; }
.dn-fstatus.is-problem { background: rgba(255, 107, 107, .14); border-color: #ff6b6b; color: #ffffff; }
.dn-fstatus__icon .mud-icon-root { font-size: 4.5rem; width: 4.5rem; height: 4.5rem; }
.dn-fstatus.is-ok .dn-fstatus__icon { color: #3ddc84; }
.dn-fstatus.is-problem .dn-fstatus__icon { color: #ff6b6b; }
.dn-fstatus__title { margin: 4px 0 0; font-size: 2rem; font-weight: 850; letter-spacing: -.02em; }
.dn-fstatus__post { margin: 0; font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.dn-fstatus__time { margin: 0; font-size: 1.15rem; font-weight: 700; }
.dn-fstatus__msg { margin: 10px 0 0; font-size: 1.05rem; color: #dbe5f5; }

.dn-field .dn-callout { font-size: 1rem; color: #ffffff; }
.dn-field .dn-callout__icon .mud-icon-root { font-size: 1.5rem; }

@media (min-width: 700px) { .dn-field__main { padding-top: 40px; } }
@media (max-width: 380px) { .dn-finput { font-size: 1.45rem; letter-spacing: .1em; } .dn-fbtn { font-size: 1.2rem; min-height: 70px; } }

/* Page signaleur avec le menu (personne connectée) : le contenu prend la place restante ; sur téléphone, de la place pour la barre d'onglets. */
.dn-shell > .dn-field { flex: 1 1 auto; min-width: 0; }
@media (max-width: 899px) { .dn-shell:has(.dn-rail) .dn-field__main { padding-bottom: calc(var(--dn-tabbar-h) + 28px); } }

/* ---------- fenêtre « Personnaliser les icônes » ---------- */

.dn-pal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.dn-pal__col { min-width: 0; }
.dn-pal__autosave { margin: 0 auto 0 16px; }

.dn-tools { list-style: none; margin: 8px 0 8px; padding: 0; border: 1px solid var(--dn-border); border-radius: var(--dn-radius); overflow: hidden; background: var(--dn-surface); }
.dn-tool { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; min-height: 52px; cursor: grab; }
.dn-tool + .dn-tool { border-top: 1px solid var(--dn-border); }
.dn-tool.is-hidden .dn-tool__icon, .dn-tool.is-hidden .dn-tool__name { opacity: .5; }
.dn-tool.is-over { box-shadow: inset 0 3px 0 var(--dn-select); background: var(--dn-select-soft); }
.dn-tool.is-dragging { opacity: .5; }
.dn-tool__grip { color: var(--dn-text-2); display: inline-flex; }
.dn-tool__icon { flex: 0 0 auto; }
.dn-tool__name { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.dn-tool__actions { flex: 0 0 auto; display: inline-flex; gap: 0; }
.dn-tool__actions .dn-icon-btn { width: 34px; height: 34px; }
.dn-tool__actions .dn-icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.dn-icon-btn--danger:hover { color: var(--mud-palette-error); }

.dn-seg { display: inline-flex; border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius-pill); overflow: hidden; align-self: flex-start; }
.dn-seg__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 0; background: transparent; color: var(--dn-text); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; }
.dn-seg__btn + .dn-seg__btn { border-left: 1px solid var(--dn-border-strong); }
.dn-seg__btn.is-on { background: var(--dn-accent); color: var(--dn-on-accent); }

.dn-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.dn-glyphbtn { display: grid; place-items: center; height: 44px; border: 1.5px solid var(--dn-border); border-radius: 10px; background: var(--dn-surface-2); color: var(--dn-text); cursor: pointer; }
.dn-glyphbtn:hover { background: var(--dn-surface-3); }
.dn-glyphbtn.is-on { border-color: var(--dn-accent); background: var(--dn-accent-soft); }

.dn-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.dn-swatch { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--dn-surface); box-shadow: 0 0 0 1.5px var(--dn-border-strong); cursor: pointer; }
.dn-swatch.is-on { box-shadow: 0 0 0 3px var(--dn-focus); }

.dn-pal__preview { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px dashed var(--dn-border-strong); border-radius: var(--dn-radius); background: var(--dn-surface-2); min-height: 76px; }
.dn-pal__previewlabel { font-size: .78rem; font-weight: 700; color: var(--dn-text-2); text-transform: uppercase; letter-spacing: .05em; }
.dn-pal__previewimg { width: 56px; height: 56px; object-fit: contain; }
.dn-pal__previewimg--small { width: 28px; height: 28px; }
.dn-pal__formactions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 899px) { .dn-pal { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Pastille « couleur libre » : multicolore tant qu'aucune couleur libre n'est choisie ; le vrai sélecteur de couleur est dessous, invisible */
.dn-swatch--custom { position: relative; display: inline-block; background: conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444); }
.dn-swatch--custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dn-swatch--custom:focus-within { box-shadow: 0 0 0 3px var(--dn-focus); }

/* Recherche et catégories des pictogrammes */
.dn-glyphsearch {
    display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; margin-bottom: 8px;
    border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius-pill); background: var(--dn-surface); color: var(--dn-text-2);
}
.dn-glyphsearch:focus-within { border-color: var(--dn-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dn-focus) 25%, transparent); }
.dn-glyphsearch__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dn-text); font: inherit; padding: 8px 0; }
.dn-glyphsearch__input::placeholder { color: var(--dn-text-2); }
.dn-glyphpick { max-height: 300px; overflow-y: auto; padding-right: 4px; border-radius: var(--dn-radius-sm); }
.dn-glyphcat { margin: 12px 0 6px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dn-text-2); }
.dn-glyphcat:first-child { margin-top: 2px; }
.dn-settings-intro { max-width: 80ch; }
.dn-tabs .mud-tabs-toolbar { background: transparent; border-bottom: 1px solid var(--dn-border); }

/* ---------- fenêtre « mise à jour » ---------- */

.dn-news { display: flex; flex-direction: column; gap: 14px; }
.dn-news__hero {
    display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--dn-radius-lg);
    background: radial-gradient(500px 220px at 100% 0%, color-mix(in srgb, var(--dn-accent) 28%, transparent), transparent 70%), linear-gradient(135deg, var(--dn-ink-2), var(--dn-ink));
    color: var(--dn-on-ink); border: 1px solid var(--dn-border);
}
.dn-news__badge { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--dn-accent); color: var(--dn-on-accent); }
.dn-news__badge .mud-icon-root { font-size: 1.8rem; width: 1.8rem; height: 1.8rem; }
.dn-news__title { margin: 0; font-size: 1.3rem; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.dn-news__sub { margin: 4px 0 0; color: color-mix(in srgb, var(--dn-on-ink) 88%, transparent); font-size: .9rem; }
.dn-news__date { margin: 2px 0 0; color: color-mix(in srgb, var(--dn-on-ink) 72%, transparent); font-size: .8rem; }
.dn-news__version { margin: 4px 0 0; font-size: .95rem; font-weight: 700; color: var(--dn-text-2); }
.dn-news__entry { display: flex; flex-direction: column; }
.dn-news__list { margin: 0; padding: 0 0 0 20px; list-style: disc; display: grid; gap: 6px; line-height: 1.45; }
.dn-news__list li::marker { color: var(--dn-accent); }
.dn-news kbd {
    display: inline-block; padding: 1px 7px; border: 1px solid var(--dn-border-strong); border-bottom-width: 2px; border-radius: 6px;
    background: var(--dn-surface-2); font: 700 .8rem var(--dn-mono);
}
.dn-news__refresh { margin-top: 4px; }

/* ---------- bandeau « nouvelle version disponible » ---------- */

.dn-update {
    position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 1250;
    display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100vw - 24px)); padding: 10px 10px 10px 14px;
    background: var(--dn-surface-2); border: 1px solid var(--dn-border-strong); border-left: 4px solid var(--dn-accent);
    border-radius: var(--dn-radius-lg); box-shadow: 0 14px 36px rgba(0, 0, 0, .45); animation: dn-update-in .25s ease-out;
}
.dn-update__icon { color: var(--dn-accent); display: grid; }
.dn-update__text { font-size: .9rem; line-height: 1.35; min-width: 0; }
.dn-update__btn {
    flex: 0 0 auto; border: 0; border-radius: 10px; padding: 8px 14px; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
    background: var(--dn-accent); color: var(--dn-on-accent);
}
.dn-update__btn:hover { filter: brightness(1.08); }
.dn-update__later { flex: 0 0 auto; border: 0; background: transparent; color: var(--dn-text-2); cursor: pointer; padding: 4px; border-radius: 8px; display: grid; }
.dn-update__later:hover { color: var(--dn-text); background: var(--dn-surface); }
@keyframes dn-update-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .dn-update { animation: none; } }
@media (max-width: 520px) { .dn-update__text { font-size: .82rem; } }

/* ---------- réglages : couleurs de l'organisation ---------- */

.dn-theme { display: flex; flex-direction: column; gap: 16px; }
.dn-theme__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dn-theme__presets .dn-help { margin: 0; }
.dn-chip-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--dn-radius-pill); cursor: pointer;
    border: 1px solid var(--dn-border-strong); background: var(--dn-surface); color: var(--dn-text); font: inherit; font-size: .86rem; font-weight: 600;
}
.dn-chip-btn:hover { background: var(--dn-surface-3); }
.dn-chip-btn--custom { padding: 0; gap: 0; overflow: hidden; }
.dn-chip-btn--custom:hover { background: var(--dn-surface); }
.dn-chip-btn__main, .dn-chip-btn__remove { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.dn-chip-btn__main { padding: 6px 6px 6px 8px; border-radius: var(--dn-radius-pill) 0 0 var(--dn-radius-pill); }
.dn-chip-btn__main:hover, .dn-chip-btn__remove:hover { background: var(--dn-surface-3); }
.dn-chip-btn__remove { padding: 6px 8px; color: var(--dn-text-2); }
.dn-chip-btn__remove:hover { color: var(--dn-state-waiting); }
.dn-chip-btn--add { border-style: dashed; padding-left: 10px; color: var(--dn-text-2); }
.dn-preset-name { margin: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dn-preset-name .mud-input-control { min-width: 200px; }
.dn-chip-btn__dots { display: inline-flex; }
.dn-chip-btn__dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--dn-surface); margin-left: -5px; box-shadow: 0 0 0 1px var(--dn-border-strong); }
.dn-chip-btn__dots i:first-child { margin-left: 0; }

/* Les zones s'empilent en colonnes (autant que la largeur le permet) sans trou : chaque carte garde sa hauteur, la suivante se glisse dessous. */
.dn-theme__zones { column-width: 440px; column-gap: 16px; }
.dn-theme__zones > * { display: block; break-inside: avoid; margin-bottom: 16px; }

/* Le logo : un bandeau en pleine largeur, bien visible, avant les couleurs. */
.dn-logo {
    display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px;
    background: var(--dn-surface); border: 1px solid var(--dn-border); border-left: 4px solid var(--dn-accent); border-radius: var(--dn-radius-lg);
}
.dn-logo__preview {
    display: grid; place-items: center; min-height: 112px; padding: 14px; border-radius: var(--dn-radius);
    background: linear-gradient(90deg, var(--dn-topbar-from), var(--dn-topbar-to)); border: 1px solid var(--dn-border);
}
.dn-logo__preview.is-empty { background: transparent; border: 2px dashed var(--dn-border-strong); }
.dn-logo__preview .dn-orglogo--hero img { max-height: 72px; max-width: 240px; }
.dn-logo__none { display: inline-flex; align-items: center; gap: 8px; color: var(--dn-text-2); font-weight: 600; }
.dn-logo__body .dn-form__legend { margin-top: 0; }
.dn-logo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 8px; }
.dn-logo__pick {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: 700;
    background: var(--dn-accent); color: var(--dn-on-accent);
}
.dn-logo__pick:hover { filter: brightness(1.08); }
.dn-logo__actions:focus-within .dn-logo__pick { outline: 3px solid var(--dn-focus); outline-offset: 2px; }
.dn-theme__fields { display: flex; flex-direction: column; gap: 18px; }
.dn-theme__switch { margin: -6px 0 0 -4px; }

.dn-colorfield { display: grid; gap: 4px; min-width: 0; }
.dn-colorfield__help { display: block; margin: 0; }
.dn-colorfield__control { position: relative; display: flex; align-items: center; gap: 8px; max-width: 340px; }
.dn-colorfield__input { flex: 1 1 auto; min-width: 0; }
.dn-colorfield__swatch {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--dn-radius-sm); cursor: pointer; padding: 0;
    border: 2px solid var(--dn-border-strong); box-shadow: inset 0 0 0 2px var(--dn-surface);
}
.dn-colorfield__swatch:hover { border-color: var(--dn-text-2); }
.dn-colorfield__pop { max-width: 340px; padding: 10px; background: var(--dn-surface-2); border: 1px solid var(--dn-border-strong); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-3); }
.dn-colorfield__tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.dn-colorfield__tabs button {
    flex: 1 1 0; padding: 6px 10px; border-radius: var(--dn-radius-sm); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
    border: 1px solid var(--dn-border); background: transparent; color: var(--dn-text-2);
}
.dn-colorfield__tabs .dn-colorfield__close { flex: 0 0 auto; border-color: transparent; }
.dn-colorfield__tabs button.is-on { background: var(--dn-accent-soft); border-color: var(--dn-accent); color: var(--dn-accent-text); }
.dn-colorfield__pop .mud-picker-paper { background: transparent; box-shadow: none; }
.dn-colorfield__checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: .78rem; font-weight: 600; }
.dn-colorfield__checks li { display: flex; align-items: center; gap: 6px; }
.dn-colorfield__checks .mud-icon-root { font-size: 1rem; flex: 0 0 auto; }
.dn-colorfield__checks .is-ok { color: var(--dn-state-inplace); }
.dn-colorfield__checks .is-bad { color: var(--dn-state-problem); }

.dn-theme__bar {
    position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px;
    background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-radius); box-shadow: var(--dn-shadow-2);
}
.dn-theme__bar .dn-savebar__state { flex: 1 1 220px; display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--dn-text-2); font-weight: 600; }
.dn-theme__bar .dn-savebar__state.is-dirty { color: var(--dn-state-problem); }

@media (max-width: 959px) {
    .dn-logo { grid-template-columns: minmax(0, 1fr); }
    .dn-theme__bar { bottom: var(--dn-tabbar-h); padding: 8px 10px; gap: 4px; }
    .dn-theme__bar .dn-savebar__state { flex: 1 1 100%; font-size: .78rem; }
    .dn-theme__bar .mud-button-root { flex: 1 1 0; min-width: 0; padding: 4px 6px; font-size: .78rem; }
    .dn-theme__bar .mud-button-icon-start { display: none; }
}

/* ---------- barre « aperçu des couleurs en cours » (toutes les pages) ---------- */

.dn-previewbar {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1240;
    display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px;
    background: var(--dn-surface-2); border: 1px solid var(--dn-border-strong); border-left: 4px solid var(--dn-accent);
    border-radius: var(--dn-radius-lg); box-shadow: var(--dn-shadow-3);
}
.dn-previewbar__text { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; min-width: 0; }
.dn-previewbar__btn {
    flex: 0 0 auto; border: 0; border-radius: 10px; padding: 7px 12px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
    background: var(--dn-accent); color: var(--dn-on-accent);
}
.dn-previewbar__btn--quiet { background: transparent; color: var(--dn-text); border: 1px solid var(--dn-border-strong); }
.dn-previewbar__btn:hover { filter: brightness(1.08); }
@media (max-width: 959px) {
    .dn-previewbar { bottom: calc(var(--dn-tabbar-h) + 12px); flex-wrap: wrap; justify-content: center; }
}

/* ---------- logo de l'organisation ---------- */

.dn-orglogo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; min-width: 0; }
.dn-orglogo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.dn-orglogo--plate { background: #fff; border-radius: 8px; padding: 3px 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); }
.dn-orglogo--bar img { max-height: 30px; max-width: 130px; width: auto; }
.dn-orglogo--rail { max-width: 100%; }
.dn-orglogo--rail img { max-height: 48px; max-width: 72px; width: auto; }
.dn-orglogo--hero img { max-height: 48px; max-width: 220px; width: auto; }
.dn-orglogo--after { margin-left: 6px; padding-left: 18px; border-left: 1px solid color-mix(in srgb, var(--dn-rail-text-strong) 30%, transparent); }
.dn-orglogo--phone { display: none; }
.dn-topbar__home.dn-orglogo--phone { display: none; }
.dn-orglogo--desk { margin: 0 2px; }
.dn-logo-preview {
    display: flex; align-items: center; min-height: 56px; padding: 10px 14px; border-radius: var(--dn-radius);
    background: linear-gradient(90deg, var(--dn-topbar-from), var(--dn-topbar-to)); border: 1px solid var(--dn-border);
}

@media (max-width: 959px) {
    .dn-orglogo--desk { display: none; }
    .dn-topbar__home.dn-orglogo--phone { display: inline-flex; margin-left: 0; padding-left: 0; border-left: 0; }
    .dn-orglogo--phone { display: inline-flex; margin-left: 4px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--dn-topbar-text) 30%, transparent); }
    .dn-topbar--logo .dn-orglogo--bar img { max-height: 26px; max-width: 84px; }
    .dn-public__brand--logo .dn-wordmark--lg { min-width: 0; font-size: clamp(.7rem, 3.4vw, 1.1rem); }
    .dn-public__brand--logo .dn-orglogo--after { margin-left: 0; padding-left: 10px; }
    .dn-public__brand--logo .dn-orglogo--hero img { max-height: 34px; max-width: 110px; }
}

/* ---------- alerte et journal de sécurité ---------- */

.dn-securitybanner { margin-bottom: 16px; }
.dn-securitybanner__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dn-securitylog { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.dn-securitylog li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 10px; border-radius: var(--dn-radius-sm); background: var(--dn-surface-2); }
.dn-securitylog li.is-new { border-left: 3px solid var(--dn-state-problem); }
.dn-securitylog__date { color: var(--dn-text-2); font-size: .82rem; flex: 0 0 auto; }