/*
 * Pilote Design System — fondations administration
 *
 * Source de marque : "Pilote Design System.zip" (24/07/2026).
 * Cette couche est volontairement additive et préfixée `pds-` : elle ne
 * modifie aucun écran historique tant que celui-ci n'adopte pas explicitement
 * les nouveaux composants.
 */
:root {
    /* Marque */
    /* VIOLET-UNIQUE (lot 1b) : un seul violet, celui du Planning (--pds-ref-*). */
    --pds-brand: var(--pds-ref-accent);
    --pds-action: var(--pds-ref-accent);
    --pds-action-hover: var(--pds-ref-accent-hover);
    --pds-brand-deep: var(--pds-ref-link);
    --pds-action-soft: #F2EFFF;
    --pds-action-soft-strong: #E7E1FF;

    /* Accents métier */
    --pds-success: #168561;
    --pds-success-soft: #E8F8F2;
    --pds-warning: #EA7C16;
    --pds-warning-soft: #FFF7ED;
    --pds-danger: #E74C3C;
    --pds-danger-soft: #FDF0EF;

    /* Surfaces et textes */
    --pds-ink: #1A1A2E;
    --pds-ink-soft: #4B4B63;
    --pds-slate: #636E72;
    --pds-muted: #8A9097;
    /* B-MOBILE (31/10) : fond commun = --bg de la maquette source
       (dist/styles.css), la mesure #f4f6f9 des captures en était l'approximation. */
    --pds-page: #f5f7fa;
    --pds-surface: #FFFFFF;
    --pds-focus-surface: #211A2B;
    --pds-focus-muted: #D8D2E0;
    --pds-border: #E8E6E1;
    --pds-border-strong: #D6D3CD;
    --pds-divider: rgba(26, 26, 46, 0.08);

    /* Typographie */
    --pds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pds-text-2xs: 0.6875rem;
    --pds-text-xs: 0.75rem;
    --pds-text-sm: 0.8125rem;
    --pds-text-base: 0.9375rem;
    --pds-text-md: 1rem;
    --pds-text-lg: 1.125rem;
    --pds-text-xl: 1.3125rem;
    --pds-text-2xl: 1.625rem;

    /* Rythme et effets */
    --pds-space-1: 4px;
    --pds-space-2: 8px;
    --pds-space-3: 12px;
    --pds-space-4: 16px;
    --pds-space-5: 20px;
    --pds-space-6: 24px;
    --pds-space-8: 32px;
    --pds-radius-xs: 4px;
    --pds-radius-sm: 8px;
    --pds-radius-md: 12px;
    --pds-radius-lg: 16px;
    --pds-radius-full: 999px;
    --pds-shadow-xs: 0 1px 3px rgba(26, 26, 46, 0.04);
    --pds-shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.06);
    --pds-shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
    --pds-shadow-lg: 0 8px 30px rgba(26, 26, 46, 0.08);
    --pds-focus-ring: 0 0 0 3px rgba(121, 82, 213, 0.16);
    --pds-transition: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
    --pds-tap-min: 44px;
}

html[data-ui-contrast="high"] {
    --pds-slate: #454B52;
    --pds-muted: #62686F;
    --pds-border: #CAC6BE;
}

html[data-ui-contrast="maximum"] {
    --pds-ink: #080812;
    --pds-ink-soft: #26263A;
    --pds-slate: #30363C;
    --pds-muted: #4C535A;
    --pds-border: #AAA49A;
    --pds-border-strong: #746E66;
}

/*
 * Référence Planning (PLANNING-RÉFÉRENCE lot 1, 11/10/2026)
 *
 * Valeurs exactes de la vue jour du Planning, référence visuelle de Pilote.
 * Source unique : `revue-planning.css` en fait des alias (`--rv-*`) et les six
 * composants partagés de `pilote-components.css` les lisent. Les jetons
 * `--pds-*` ci-dessus restent ceux du pont de compatibilité.
 * Voir docs/design/DESIGN_SYSTEM.md.
 */
@font-face { font-family: Outfit; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit/Outfit.e31a3aa5fce3.ttf") format('truetype'); }

:root {
    --pds-ref-font: Outfit, system-ui, sans-serif;
    --pds-ref-canvas: var(--pds-page); /* B-MOBILE (31/10) : planning sur le fond commun */
    --pds-ref-surface: #fff;
    --pds-ref-subtle: #f5f7fa;
    --pds-ref-ink: #282936;
    --pds-ref-muted: #596273;
    --pds-ref-border: #bdc5d2;
    /* Bordure d'un contrôle au repos (champ, choix) : --field de la maquette
       (dist/styles.css), 3,07:1 sur blanc (seuil 3:1). --pds-ref-border reste
       réservé aux cadres et séparateurs. */
    --pds-ref-control-border: #8d93a4;
    --pds-ref-accent: #7952d5;
    --pds-ref-accent-hover: #6b44c2;
    --pds-ref-on-accent: #fff;
    --pds-ref-link: #6742bd;
    --pds-ref-soft: #e3e7ee;
    --pds-ref-gutter: #f0f3f7;
    --pds-ref-hatch: #c1c9d6;
    --pds-ref-grid: #e5e9f0;
    --pds-ref-hour: #c6cedb;
    --pds-ref-pink: #dd4b85;
    --pds-ref-now-label-bg: #d72d71;
    --pds-ref-danger: #b42318;

    --pds-ref-radius-card: 5px;
    --pds-ref-radius-frame: 10px;
    --pds-ref-radius-control: 12px;
    --pds-ref-radius-panel: 14px;
    --pds-ref-radius-dialog: 18px;
    --pds-ref-radius-pill: var(--pds-ref-radius-control);
    --pds-ref-control-height: 44px;
    /* Pages de données (variantes --data) : corps, chiffres clés, aide. */
    --pds-ref-size-data: 15px;
    --pds-ref-size-key: 17px;
    --pds-ref-size-help: 13px;
    --pds-ref-shadow-frame: 0 5px 18px #24344d14, 0 1px 3px #24344d12;
    --pds-ref-shadow-card: 0 1px 2px #0000000b;
    --pds-ref-shadow-card-hover: 0 2px 8px #00000022;
}

html[data-pilot-theme="studio"] {
    --pds-ref-canvas: #18191f;
    --pds-ref-surface: #22232c;
    --pds-ref-subtle: #22232c;
    --pds-ref-ink: #ededf4;
    --pds-ref-muted: #b0b2c1;
    --pds-ref-border: #393b47;
    --pds-ref-link: #c0a9ff;
    --pds-ref-soft: #2b2d38;
    --pds-ref-gutter: #22232c;
    --pds-ref-hatch: #40434f;
    --pds-ref-grid: #393b47;
    --pds-ref-hour: #454856;
}

/* Mise en page */
.pds-page {
    color: var(--pds-ink);
    font-family: var(--pds-font);
}

.pds-eyebrow {
    display: block;
    margin-bottom: var(--pds-space-2);
    color: var(--pds-brand-deep);
    font-size: var(--pds-text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pds-title {
    margin: 0;
    color: var(--pds-ink);
    font-size: var(--pds-text-2xl);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pds-lead {
    max-width: 760px;
    margin: var(--pds-space-2) 0 0;
    color: var(--pds-slate);
    font-size: var(--pds-text-base);
    line-height: 1.55;
}

.pds-section { margin-top: var(--pds-space-8); }
.pds-section-header { margin-bottom: var(--pds-space-4); }
.pds-section-title {
    margin: 0;
    color: var(--pds-ink);
    font-size: var(--pds-text-xl);
    line-height: 1.3;
}
.pds-section-copy {
    margin: var(--pds-space-1) 0 0;
    color: var(--pds-slate);
    font-size: var(--pds-text-sm);
    line-height: 1.5;
}
.pds-stack { display: grid; gap: var(--pds-space-4); }

.pds-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--pds-space-4);
}

.pds-span-4 { grid-column: span 4; }
.pds-span-6 { grid-column: span 6; }
.pds-span-8 { grid-column: span 8; }
.pds-span-12 { grid-column: 1 / -1; }

/* Cartes */
.pds-card-title {
    margin: 0 0 var(--pds-space-2);
    font-size: var(--pds-text-lg);
    line-height: 1.3;
}

.pds-card-copy {
    margin: 0;
    color: var(--pds-slate);
    font-size: var(--pds-text-sm);
    line-height: 1.5;
}

/* Boutons */
.pds-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pds-space-2);
}

.pds-field-control:focus-visible,
.pds-tab:focus-visible {
    outline: none;
    box-shadow: var(--pds-focus-ring);
}


/* Formulaires */
.pds-field { display: grid; gap: 6px; }
.pds-field-label {
    color: var(--pds-ink-soft);
    font-size: var(--pds-text-sm);
    font-weight: 700;
}
.pds-field-hint { color: var(--pds-muted); font-size: var(--pds-text-xs); }
.pds-field-control {
    width: 100%;
    min-height: var(--pds-tap-min);
    padding: 10px 12px;
    border: 1.5px solid var(--pds-border);
    border-radius: var(--pds-radius-sm);
    background: #FFF;
    color: var(--pds-ink);
    font-family: inherit;
    font-size: var(--pds-text-base);
    transition: border-color var(--pds-transition), box-shadow var(--pds-transition);
}
.pds-field-control:hover { border-color: var(--pds-border-strong); }
.pds-field-control:focus {
    border-color: var(--pds-action);
    outline: none;
    box-shadow: var(--pds-focus-ring);
}

/* Onglets */
.pds-tabs {
    display: flex;
    gap: var(--pds-space-1);
    padding: var(--pds-space-1);
    border: 1px solid var(--pds-border);
    border-radius: var(--pds-radius-md);
    background: #F3F1F8;
}
.pds-tab {
    min-height: 40px;
    flex: 1 1 0;
    border: 0;
    border-radius: var(--pds-radius-sm);
    background: transparent;
    color: var(--pds-ink-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--pds-text-sm);
    font-weight: 700;
}
.pds-tab:hover { background: #E9E5F2; color: var(--pds-brand-deep); }
.pds-tab[aria-selected="true"] {
    background: var(--pds-action);
    color: #FFF;
    box-shadow: var(--pds-shadow-xs);
}

/* Badges et feedback */
.pds-alert {
    display: flex;
    gap: var(--pds-space-3);
    padding: var(--pds-space-4);
    border: 1px solid var(--pds-border);
    border-radius: var(--pds-radius-sm);
    background: #FFF;
    color: var(--pds-ink-soft);
    font-size: var(--pds-text-sm);
    line-height: 1.5;
}
.pds-alert--success { border-color: #BCE9D9; background: var(--pds-success-soft); }
.pds-alert--warning { border-color: #F1D0A8; background: var(--pds-warning-soft); }
.pds-alert--danger { border-color: #F3C5C0; background: var(--pds-danger-soft); }

/* Chiffres et tableaux */
.pds-stat-card {
    position: relative;
    overflow: hidden;
    padding: var(--pds-space-5);
    border: 1px solid var(--pds-border);
    border-radius: var(--pds-radius-md);
    background: var(--pds-surface);
    box-shadow: var(--pds-shadow-sm);
}
.pds-stat-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pds-action);
    content: "";
}
.pds-stat-card--success::before { background: var(--pds-success); }
.pds-stat-card--warning::before { background: var(--pds-warning); }
.pds-stat-head,
.pds-stat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pds-space-3);
}
.pds-stat-label {
    color: var(--pds-slate);
    font-size: var(--pds-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pds-stat-value {
    display: block;
    margin-top: var(--pds-space-1);
    color: var(--pds-ink);
    font-size: var(--pds-text-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.pds-stat-context {
    color: var(--pds-muted);
    font-size: var(--pds-text-xs);
}
.pds-stat-meter {
    width: 100%;
    height: 7px;
    margin: var(--pds-space-4) 0 var(--pds-space-2);
    overflow: hidden;
    border: 0;
    border-radius: var(--pds-radius-full);
    background: #ECE9F1;
}
.pds-stat-meter::-webkit-progress-bar {
    border-radius: var(--pds-radius-full);
    background: #ECE9F1;
}
.pds-stat-meter::-webkit-progress-value {
    border-radius: var(--pds-radius-full);
    background: var(--pds-action);
}
.pds-stat-meter::-moz-progress-bar {
    border-radius: var(--pds-radius-full);
    background: var(--pds-action);
}
.pds-stat-card--success .pds-stat-meter::-webkit-progress-value { background: var(--pds-success); }
.pds-stat-card--success .pds-stat-meter::-moz-progress-bar { background: var(--pds-success); }
.pds-stat-card--warning .pds-stat-meter::-webkit-progress-value { background: var(--pds-warning); }
.pds-stat-card--warning .pds-stat-meter::-moz-progress-bar { background: var(--pds-warning); }
.pds-money, .pds-time { font-variant-numeric: tabular-nums; }

/* Point focal métier — dérivé du total de l’encaissement */
.pds-focus-card {
    display: grid;
    align-content: center;
    min-height: 190px;
    padding: var(--pds-space-6);
    border: 1px solid var(--pds-focus-surface);
    border-radius: var(--pds-radius-lg);
    background: var(--pds-focus-surface);
    color: #FFF;
    box-shadow: 0 12px 28px rgba(33, 26, 43, 0.16);
    text-align: center;
}
.pds-focus-label {
    color: var(--pds-focus-muted);
    font-size: var(--pds-text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.pds-focus-value {
    display: block;
    margin-top: var(--pds-space-2);
    color: #FFF;
    font-size: 2.375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.pds-focus-detail {
    display: flex;
    justify-content: space-between;
    gap: var(--pds-space-4);
    margin-top: var(--pds-space-4);
    padding-top: var(--pds-space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--pds-focus-muted);
    font-size: var(--pds-text-sm);
}
.pds-focus-detail strong {
    color: #FFF;
    font-variant-numeric: tabular-nums;
}

.pds-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pds-space-2);
}
.pds-choice {
    min-height: 56px;
    padding: 13px 14px;
    border: 1.5px solid var(--pds-border-strong);
    border-radius: var(--pds-radius-md);
    background: #FFF;
    color: var(--pds-ink);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--pds-text-md);
    font-weight: 750;
    transition: background var(--pds-transition), border-color var(--pds-transition),
                box-shadow var(--pds-transition);
}
.pds-choice:hover {
    border-color: var(--pds-action);
    background: var(--pds-action-soft);
}
.pds-choice:focus-visible {
    border-color: var(--pds-action);
    outline: none;
    box-shadow: var(--pds-focus-ring);
}
.pds-choice--wide { grid-column: 1 / -1; }

.pds-data-panel {
    overflow: hidden;
    border: 1px solid var(--pds-border);
    border-radius: var(--pds-radius-md);
    background: #FFF;
    box-shadow: var(--pds-shadow-sm);
}
.pds-data-panel-header,
.pds-data-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pds-space-4);
    padding: var(--pds-space-4);
}
.pds-data-panel-header { border-bottom: 1px solid var(--pds-border); }
.pds-data-panel-footer {
    border-top: 1px solid var(--pds-border);
    background: #FAF9FC;
    color: var(--pds-slate);
    font-size: var(--pds-text-sm);
}
.pds-data-panel-title {
    margin: 0;
    color: var(--pds-ink);
    font-size: var(--pds-text-md);
}
.pds-data-panel-copy {
    margin: 2px 0 0;
    color: var(--pds-muted);
    font-size: var(--pds-text-xs);
}
.pds-client-cell {
    display: flex;
    align-items: center;
    gap: var(--pds-space-3);
}
.pds-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--pds-action-soft-strong);
    color: var(--pds-brand-deep);
    font-size: var(--pds-text-xs);
    font-weight: 800;
}
.pds-cell-primary {
    display: block;
    color: var(--pds-ink);
    font-weight: 700;
}
.pds-cell-secondary {
    display: block;
    margin-top: 2px;
    color: var(--pds-muted);
    font-size: var(--pds-text-xs);
}
.pds-table-amount {
    color: var(--pds-ink);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Référence de palette */
.pds-swatch {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--pds-space-3);
    border: 1px solid rgba(26, 26, 46, 0.1);
    border-radius: var(--pds-radius-sm);
    color: var(--pds-ink);
    font-size: var(--pds-text-xs);
    font-weight: 700;
}
.pds-swatch code { margin-top: 2px; font-size: var(--pds-text-2xs); font-weight: 500; }
.pds-swatch--action { background: var(--pds-action); color: #FFF; }
.pds-swatch--brand-deep { background: var(--pds-brand-deep); color: #FFF; }
.pds-swatch--selection { background: var(--pds-action-soft); }
.pds-swatch--success { background: var(--pds-success); color: #FFF; }
.pds-swatch--warning { background: var(--pds-warning); color: #FFF; }
.pds-swatch--page { background: var(--pds-page); }

@media (max-width: 900px) {
    .pds-span-4, .pds-span-6, .pds-span-8 { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .pds-grid { grid-template-columns: 1fr; }
    .pds-span-4, .pds-span-6, .pds-span-8, .pds-span-12 { grid-column: 1; }
    .pds-tabs { overflow-x: auto; }
    .pds-tab { min-width: 110px; }
    .pds-actions { align-items: stretch; }
    .pds-focus-value { font-size: 2rem; }
    .pds-data-panel-header,
    .pds-data-panel-footer { align-items: flex-start; flex-direction: column; }
}

/*
 * Pont de compatibilité — CONFINÉ aux surfaces desktop/admin (.pds-admin)
 *
 * Les écrans historiques desktop/admin continuent d'utiliser les variables et
 * composants de base. Ce pont les aligne sur les fondations PDS sans modifier
 * leur logique métier ni imposer une réécriture immédiate de chaque template.
 *
 * IMPORTANT : tout est borné à la classe racine .pds-admin, posée sur <body>
 * par base.html.
 */
.pds-admin {
    --bg-page: var(--pds-page);
    --bg-surface: var(--pds-surface);
    --text-primary: var(--pds-ink);
    --text-secondary: var(--pds-slate);
    --text-muted: var(--pds-muted);
    --accent: var(--pds-action);
    --accent-hover: var(--pds-action-hover);
    --accent-light: var(--pds-action-soft-strong);
    --border: var(--pds-border);
    --border-hover: var(--pds-border-strong);
    --shadow-sm: var(--pds-shadow-xs);
    --shadow-md: var(--pds-shadow-md);
    --shadow-lg: var(--pds-shadow-lg);
    --radius-sm: var(--pds-radius-sm);
    --radius-md: var(--pds-radius-md);
    --radius-lg: var(--pds-radius-lg);
    --btn-primary: var(--pds-action);
    --btn-primary-hover: var(--pds-action-hover);
    --btn-danger: var(--pds-danger);
    --btn-success: var(--pds-success);
    --brand-700: var(--pds-brand-deep);
    --brand-600: var(--pds-action);
    --brand-500: var(--pds-action);
    --brand-100: var(--pds-action-soft-strong);
    --brand-050: var(--pds-action-soft);
    --nav-accent: var(--pds-action);
    --success-600: var(--pds-success);
    --warning-600: var(--pds-warning);
    --danger-600: var(--pds-danger);
    --surface: var(--pds-surface);
    --design-border: var(--pds-border);
    --design-border-strong: var(--pds-border-strong);
    --pilot-primary: var(--pds-brand-deep);
    --pilot-primary-bg: var(--pds-action-soft);
    --pilot-text: var(--pds-ink);
    --pilot-text-secondary: var(--pds-slate);
    --pilot-text-muted: var(--pds-muted);
    --pilot-bg: var(--pds-page);
    --pilot-bg-card: var(--pds-surface);
    --pilot-border: var(--pds-border);
    --pilot-border-light: var(--pds-divider);
    --pilot-success: var(--pds-success);
    --pilot-success-bg: var(--pds-success-soft);
    --pilot-danger: var(--pds-danger);
    --pilot-danger-bg: var(--pds-danger-soft);
    --pilot-warning: var(--pds-warning);
    --pilot-warning-bg: var(--pds-warning-soft);
    --pilot-btn-font: 0.875rem;
    --pilot-btn-weight: 700;
}

.pds-admin {
    color: var(--pds-ink);
    background: var(--pds-page);
}

.pds-admin .module-frame {
    border: 1px solid var(--pds-border);
    background: var(--pds-surface);
    box-shadow: var(--pds-shadow-sm);
}

.pds-admin .btn {
    min-height: var(--pds-tap-min);
    font-weight: 700;
}

.pds-admin .btn-primary {
    background: var(--pds-action);
    box-shadow: var(--pds-shadow-xs);
}
.pds-admin .btn-primary:hover {
    background: var(--pds-action-hover);
    box-shadow: var(--pds-shadow-sm);
}
.pds-admin .btn-secondary {
    border: 1.5px solid var(--pds-border);
    background: var(--pds-surface);
    color: var(--pds-ink);
    box-shadow: var(--pds-shadow-xs);
}
.pds-admin .btn-secondary:hover {
    border-color: var(--pds-border-strong);
    background: var(--pds-page);
}
.pds-admin .btn-danger {
    background: var(--pds-danger);
    color: #FFF;
}
.pds-admin .btn-danger:hover { background: #CF4033; }

.pds-admin .form-group label {
    color: var(--pds-ink-soft);
    font-size: var(--pds-text-sm);
    font-weight: 700;
}
/* Les cases a cocher et boutons radio sont exclus : leur boite native n'a pas
   de hauteur de frappe etirable. Leur imposer min-height/border/background les
   deforme (44px de haut, detachees de leur libelle). La cible de frappe est
   portee par le <label> qui les enveloppe. */
.pds-admin .form-group input:not([type="checkbox"]):not([type="radio"]),
.pds-admin .form-group select,
.pds-admin .form-group textarea,
.pds-admin .form-control {
    min-height: var(--pds-tap-min);
    border: 1.5px solid var(--pds-border);
    background: var(--pds-surface);
    color: var(--pds-ink);
    font-size: var(--pds-text-base);
}
.pds-admin .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.pds-admin .form-group select:focus,
.pds-admin .form-group textarea:focus,
.pds-admin .form-control:focus {
    border-color: var(--pds-action);
    outline: none;
    box-shadow: var(--pds-focus-ring);
}

.pds-admin table th {
    color: var(--pds-slate);
    font-weight: 700;
}
.pds-admin table td { color: var(--pds-ink-soft); }

html[data-ui-relief="strong"] .pds-admin .module-frame {
    border-color: var(--pds-border-strong);
    box-shadow: var(--pds-shadow-md);
}