/* =============================================================================
   CABINET UI — design system de l'espace connecté (Cabinet Dentaire)
   Chargé dans templates/custom_admin/base.html APRÈS Bootstrap 5.3.
   Inspiration : « GFA Console » (fond crème, cartes arrondies, hero ambré).

   ─────────────────────────────────────────────────────────────────────────────
   MODE D'EMPLOI (HTML minimal de chaque composant)
   Catalogue complet : templates/custom_admin/user/_ui_reference.html
   ─────────────────────────────────────────────────────────────────────────────

   0. Règles générales
      - Les pages héritent de base.html : la police, le fond crème et les
        surcharges Bootstrap (.card, .btn, .table, .badge, .alert, .form-*,
        .pagination, .nav-tabs, .dropdown-menu, .modal) s'appliquent seules.
      - Les composants « cd-* » ci-dessous sont à utiliser pour les pages refaites.
      - Icônes : Material Icons (<span class="material-icons">event</span>).
      - Les styles inline / <style> d'une page passent APRÈS ce fichier :
        ils gagnent. Supprimez-les quand vous refaites la page.

   1. Hero (bannière dégradée)
      <section class="cd-hero">
        <div class="cd-hero__main">
          <div class="cd-hero__eyebrow">Secrétariat · lundi 12 octobre 2026</div>
          <h1 class="cd-hero__title">Tableau de bord</h1>
          <p class="cd-hero__subtitle">Vue d'ensemble de la journée.</p>
        </div>
        <div class="cd-hero__stats">                       (optionnel)
          <div class="cd-hero__stat">
            <span class="cd-hero__stat-value">3</span>
            <span class="cd-hero__stat-label">en attente</span>
          </div>
        </div>
        <div class="cd-hero__actions">
          <a class="cd-btn-ghost" href="#"><span class="material-icons">add</span> Secondaire</a>
          <a class="cd-btn-light" href="#"><span class="material-icons">add</span> Principal</a>
        </div>
      </section>

   2. Boutons spécifiques
      .cd-btn-light   bouton blanc plein (sur hero ou fond coloré)
      .cd-btn-ghost   bouton translucide bordé (sur hero)
      .cd-btn-icon    à ajouter à un .btn pour un bouton carré « icône seule »
                      <a class="btn btn-sm btn-outline-secondary cd-btn-icon" title="Modifier">
                        <span class="material-icons">edit</span></a>
      Les boutons Bootstrap (.btn-primary, .btn-outline-secondary…) sont
      harmonisés : utilisez-les pour le reste.

   3. Carte
      <div class="cd-card">
        <div class="cd-card__header">
          <div>
            <h2 class="cd-card__title">Titre <span class="cd-count">5</span></h2>
            <p class="cd-card__subtitle">Sous-titre</p>
          </div>
          <div class="cd-card__actions"><a class="btn btn-outline-secondary btn-sm" href="#">Action</a></div>
        </div>
        <div class="cd-card__body">…</div>
      </div>
      Variantes : .cd-card__body--flush (tableau collé aux bords),
                  .cd-card--agent (encart violet « agent vocal »),
                  .cd-card--link (carte cliquable, survol).

   4. KPI
      <a class="cd-kpi" href="#">                (ou <div class="cd-kpi">)
        <span class="cd-tile cd-tile--sky"><span class="material-icons">event</span></span>
        <div class="cd-kpi__content">
          <div class="cd-kpi__label">RDV aujourd'hui</div>
          <div class="cd-kpi__value">12</div>
          <div class="cd-kpi__hint">programmés ce jour</div>
        </div>
      </a>
      Pastilles : .cd-tile--rose | --mint | --sand | --lavender | --sky | --agent
      Taille : .cd-tile--sm (36px) / défaut (52px) / .cd-tile--lg (64px)
      Grille conseillée : <div class="cd-kpi-grid">…</div> (auto-fit)

   5. Onglets « VUES »
      <nav class="cd-tabs" aria-label="Vues">
        <span class="cd-tabs__label">Vues</span>
        <a class="cd-tab cd-tab--active" href="#" aria-current="page"><span class="material-icons">dashboard</span> Tableau de bord</a>
        <a class="cd-tab" href="#"><span class="material-icons">people</span> Patients <span class="cd-count">4</span></a>
      </nav>

   6. Tableau dans une carte
      <div class="cd-card"><div class="cd-card__header">…</div>
        <div class="cd-card__body cd-card__body--flush">
          <div class="table-responsive">
            <table class="table cd-table mb-0">…</table>
          </div>
        </div>
      </div>
      Ligne mise en avant agent vocal : <tr class="cd-row-agent">

   7. Badges et compteurs
      <span class="cd-badge cd-badge--success">Confirmé</span>
      Sémantiques : --success --warning --danger --info --neutral --brand --agent
      Statuts (= valeurs en base, utilisable avec {{ rdv.statut }}) :
        --en_attente --confirme --annule --honore --absent --contacte --refuse
        --rdv_pris --sans_rdv --erreur
      Solide agent vocal : .cd-badge--agent-solid
      Point de couleur : <span class="cd-badge cd-badge--success cd-badge--dot">…</span>
      Compteur rond : <span class="cd-count">5</span>
        variantes .cd-count--danger --warning --info --agent --on-dark

   8. Titre de section
      <h2 class="cd-section-title"><span class="material-icons">today</span> RDV du jour <span class="cd-count">3</span></h2>
      Sur-titre en petites capitales : <div class="cd-eyebrow">Vues</div>

   9. État vide
      <div class="cd-empty">
        <span class="cd-tile cd-tile--sand cd-tile--lg"><span class="material-icons">event_busy</span></span>
        <div class="cd-empty__title">Aucun RDV</div>
        <p class="cd-empty__text">Rien de prévu aujourd'hui.</p>
        <a class="btn btn-primary btn-sm" href="#">Créer un RDV</a>
      </div>

   10. Encart d'alerte (callout)
      <div class="cd-callout cd-callout--warning">
        <span class="cd-tile cd-tile--sand"><span class="material-icons">notifications_active</span></span>
        <div class="cd-callout__body"><strong>Titre</strong><div class="cd-help">Détail</div></div>
        <div class="cd-callout__actions"><a class="btn btn-sm btn-warning" href="#">Traiter</a></div>
      </div>
      Variantes : --warning --info --success --danger --agent ; .cd-callout--pulse (bordure animée)

   11. Formulaires
      <div class="cd-form-grid">                (auto-fit ; --2 / --3 colonnes fixes)
        <div class="cd-field">
          <label class="cd-label cd-label--required" for="id_nom">Nom</label>
          <input class="form-control" id="id_nom" name="nom">
          <div class="cd-help">Aide sous le champ.</div>
        </div>
        <div class="cd-field cd-field--full">…</div>   (pleine largeur)
      </div>
      Avec Django : {{ form.nom }} hérite du style si le widget a class="form-control".

   12. Actions rapides (tuiles)
      <div class="cd-quick-grid">
        <a class="cd-quick" href="#"><span class="cd-tile cd-tile--mint cd-tile--sm"><span class="material-icons">person_add</span></span> Nouveau patient</a>
      </div>

   ── Ajouts phase 2 (rétro-compatibles) ──
   13. Liste (notifications, flux)
      <div class="cd-card"><div class="cd-list">
        <a class="cd-list__item cd-list__item--unread" href="#">
          <span class="cd-tile cd-tile--sky cd-tile--sm"><span class="material-icons">event</span></span>
          <div class="cd-list__body">
            <div class="cd-list__head"><span class="cd-list__title">Titre</span><span class="cd-list__meta">il y a 2 h</span></div>
            <p class="cd-list__text">Message</p>
          </div>
        </a>
      </div></div>

   14. Fiche « libellé : valeur »
      <dl class="cd-dl"><dt>Téléphone</dt><dd>07 00 00 00 00</dd></dl>

   15. Panneau en retrait (bloc dans une carte)
      <div class="cd-panel"><div class="cd-panel__label">Statut</div><div class="cd-panel__value">12</div></div>
      Variante : .cd-panel--white

   16. Boîte média (aperçu logo) : <div class="cd-media-box"><img src="…" alt=""></div>

   17. Bouton violet agent vocal : <button class="btn cd-btn-agent">…</button>
       Icône violette dans un titre de carte : <span class="material-icons cd-icon-agent">…</span>

   18. Utilitaire : .cd-mono (identifiants, clés, URL — police à chasse fixe, coupe les longues chaînes)
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --cd-bg: #F4EEE6;
    --cd-surface: #FFFBF6;
    --cd-surface-2: #FBF5EE;
    --cd-border: #EADFD2;
    --cd-border-strong: #D9C8B5;
    --cd-text: #2B1E14;
    --cd-text-muted: #7A6A5A;
    --cd-brand-800: #6E4520;
    --cd-brand-600: #A8692F;
    --cd-brand-400: #D18A3A;
    --cd-accent: #F2A541;
    --cd-hero: linear-gradient(110deg, #A8692F 0%, #D18A3A 48%, #F2A541 100%);

    --cd-radius-xl: 22px;
    --cd-radius-lg: 16px;
    --cd-radius-md: 12px;
    --cd-radius-sm: 10px;
    --cd-radius-pill: 999px;

    --cd-shadow: 0 1px 2px rgba(43,30,20,.04), 0 6px 20px rgba(110,69,32,.06);
    --cd-shadow-hover: 0 2px 4px rgba(43,30,20,.05), 0 12px 28px rgba(110,69,32,.10);
    --cd-shadow-hero: 0 14px 34px rgba(168,105,47,.22);
    --cd-focus-ring: 0 0 0 .22rem rgba(209,138,58,.25);

    /* Pastilles d'icônes (fond / icône) */
    --cd-tile-rose-bg: #F6E3E6;     --cd-tile-rose-fg: #9C4A5B;
    --cd-tile-mint-bg: #E2F1EA;     --cd-tile-mint-fg: #3E7D62;
    --cd-tile-sand-bg: #F3E6D8;     --cd-tile-sand-fg: #8A5A2B;
    --cd-tile-lavender-bg: #ECE7F6; --cd-tile-lavender-fg: #6A5A9C;
    --cd-tile-sky-bg: #E3EDF4;      --cd-tile-sky-fg: #4A6E8A;

    /* Agent vocal : violet distinctif (ne pas changer) */
    --cd-agent-vocal: #6D4C9F;
    --cd-agent-vocal-dark: #4B2E7A;
    --cd-agent-vocal-soft: #F3EEFB;
    --cd-agent-vocal-border: #DCD0EF;

    /* Statuts doux (fond pastel + texte foncé) — dérivés de la palette */
    --cd-success-bg: #E2F1EA;  --cd-success-fg: #2F6B52;  --cd-success: #3E7D62;
    --cd-warning-bg: #FCEFD8;  --cd-warning-fg: #8A5512;  --cd-warning: #F2A541;
    --cd-danger-bg:  #F8E3E1;  --cd-danger-fg:  #A23B36;  --cd-danger:  #B4473F;
    --cd-info-bg:    #E3EDF4;  --cd-info-fg:    #3E6684;  --cd-info:    #4A6E8A;
    --cd-neutral-bg: #EFE7DE;  --cd-neutral-fg: #6B5B4C;

    /* Dérivé : survol des boutons primaires */
    --cd-brand-900: #57361A;

    /* Gabarit */
    --cd-topbar-h: 68px;
    --cd-sidebar-w: 264px;
    --cd-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ── Branchement sur les variables Bootstrap 5.3 ── */
    --bs-body-font-family: var(--cd-font);
    --bs-body-font-size: .9375rem;
    --bs-body-bg: var(--cd-bg);
    --bs-body-bg-rgb: 244,238,230;
    --bs-body-color: var(--cd-text);
    --bs-body-color-rgb: 43,30,20;
    --bs-emphasis-color: var(--cd-text);
    --bs-heading-color: var(--cd-text);
    --bs-secondary-color: var(--cd-text-muted);
    --bs-secondary-bg: #F1E8DD;
    --bs-tertiary-bg: var(--cd-surface-2);
    --bs-border-color: var(--cd-border);
    --bs-border-color-translucent: rgba(110,69,32,.12);
    --bs-border-radius: var(--cd-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--cd-radius-md);
    --bs-border-radius-xl: var(--cd-radius-lg);
    --bs-border-radius-xxl: var(--cd-radius-xl);
    --bs-link-color: var(--cd-brand-800);
    --bs-link-color-rgb: 110,69,32;
    --bs-link-hover-color: var(--cd-brand-600);
    --bs-link-hover-color-rgb: 168,105,47;
    --bs-primary: #6E4520;        --bs-primary-rgb: 110,69,32;
    --bs-secondary: #7A6A5A;      --bs-secondary-rgb: 122,106,90;
    --bs-success: #3E7D62;        --bs-success-rgb: 62,125,98;
    --bs-info: #4A6E8A;           --bs-info-rgb: 74,110,138;
    --bs-warning: #F2A541;        --bs-warning-rgb: 242,165,65;
    --bs-danger: #B4473F;         --bs-danger-rgb: 180,71,63;
    --bs-light: #FBF5EE;          --bs-light-rgb: 251,245,238;
    --bs-dark: #2B1E14;           --bs-dark-rgb: 43,30,20;
    --bs-primary-bg-subtle: #F3E6D8;   --bs-primary-text-emphasis: #6E4520;   --bs-primary-border-subtle: #E3CBB0;
    --bs-success-bg-subtle: #E2F1EA;   --bs-success-text-emphasis: #2F6B52;   --bs-success-border-subtle: #BFDECF;
    --bs-warning-bg-subtle: #FCEFD8;   --bs-warning-text-emphasis: #8A5512;   --bs-warning-border-subtle: #F4D6A6;
    --bs-danger-bg-subtle: #F8E3E1;    --bs-danger-text-emphasis: #A23B36;    --bs-danger-border-subtle: #EDC3BF;
    --bs-info-bg-subtle: #E3EDF4;      --bs-info-text-emphasis: #3E6684;      --bs-info-border-subtle: #C3D6E4;
    --bs-secondary-bg-subtle: #EFE7DE; --bs-secondary-text-emphasis: #6B5B4C; --bs-secondary-border-subtle: #DCCFC1;
    --bs-light-bg-subtle: #FFFBF6;     --bs-light-border-subtle: #EADFD2;
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--cd-font);
    background-color: var(--cd-bg);
    color: var(--cd-text);
    font-size: .9375rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;               /* garde-fou : pas de scroll horizontal */
}
h1, h2, h3, .h1, .h2, .h3 { font-weight: 800; letter-spacing: -.025em; color: var(--cd-text); }
h4, h5, h6, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.015em; color: var(--cd-text); }
h1, .h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); }
h2, .h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); }
h3, .h3 { font-size: 1.3rem; }
a { color: var(--cd-brand-800); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cd-brand-600); }
small, .small { font-size: .84em; }
.text-muted { color: var(--cd-text-muted) !important; }
hr { border-color: var(--cd-border); opacity: 1; }
code { color: var(--cd-brand-600); }
::selection { background: rgba(242,165,65,.32); }
:focus-visible { outline: 2px solid var(--cd-brand-400); outline-offset: 2px; }
.material-icons { vertical-align: middle; line-height: 1; }

.cd-eyebrow {
    font-size: .72rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cd-text-muted);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. GABARIT (barre du haut, sidebar, contenu) — utilisé par base.html
   ───────────────────────────────────────────────────────────────────────────── */
.cd-topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 1030;
    height: var(--cd-topbar-h);
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.25rem;
    background: rgba(251,245,238,.92);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid var(--cd-border);
}
.cd-topbar__toggle {
    display: none;
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: var(--cd-radius-sm);
    border: 1px solid var(--cd-border-strong);
    background: var(--cd-surface); color: var(--cd-brand-800);
    align-items: center; justify-content: center; padding: 0;
}
.cd-topbar__toggle:hover { background: var(--cd-surface-2); }
.cd-brand {
    display: flex; align-items: center; gap: .7rem; min-width: 0;
    text-decoration: none; color: var(--cd-brand-800);
}
.cd-brand:hover { color: var(--cd-brand-800); }
.cd-brand__logo {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: var(--cd-radius-md);
    background: linear-gradient(140deg, #A8692F, #6E4520);
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(110,69,32,.25);
    overflow: hidden;
}
.cd-brand__logo--image { background: var(--cd-surface); border: 1px solid var(--cd-border); box-shadow: none; }
.cd-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.cd-brand__name {
    min-width: 0;
    font-weight: 800; font-size: 1.15rem; letter-spacing: -.03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-brand__sep {
    padding-left: .7rem; border-left: 1px solid var(--cd-border-strong);
    color: var(--cd-text-muted); font-weight: 600; font-size: .92rem; white-space: nowrap;
}
.cd-topbar__right { margin-left: auto; display: flex; align-items: center; gap: .85rem; }
.cd-topbar__icon-btn {
    position: relative;
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--cd-border-strong); background: var(--cd-surface);
    color: var(--cd-brand-800); text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.cd-topbar__icon-btn:hover, .cd-topbar__icon-btn[aria-expanded="true"] {
    background: var(--cd-surface-2); border-color: var(--cd-brand-400); color: var(--cd-brand-800);
}
.cd-user { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.cd-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #A8692F, #6E4520);
    color: #fff; font-weight: 800; font-size: .88rem; letter-spacing: .02em;
}
.cd-avatar--sm { width: 34px; height: 34px; flex-basis: 34px; font-size: .75rem; }
.cd-user__text { line-height: 1.2; min-width: 0; }
.cd-user__name { font-weight: 700; font-size: .92rem; color: var(--cd-text); white-space: nowrap; }
.cd-user__role { font-size: .8rem; color: var(--cd-text-muted); white-space: nowrap; }
.cd-btn-logout {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .5rem 1rem; border-radius: var(--cd-radius-sm);
    border: 1px solid var(--cd-border-strong); background: var(--cd-surface);
    color: var(--cd-brand-800); font-weight: 700; font-size: .9rem; text-decoration: none;
    white-space: nowrap; transition: background-color .15s, border-color .15s;
}
.cd-btn-logout .material-icons { font-size: 1.15rem; }
.cd-btn-logout:hover { background: var(--cd-surface-2); border-color: var(--cd-brand-400); color: var(--cd-brand-800); }

/* Sidebar (classes historiques conservées : .sidebar, .sidebar-section, .sidebar-divider, .sidebar-badge, .user-info) */
.sidebar.cd-sidebar {
    position: fixed; z-index: 1020;
    top: var(--cd-topbar-h); bottom: 0; left: 0;
    width: var(--cd-sidebar-w);
    display: flex; flex-direction: column;
    padding: 1rem .85rem;
    background: var(--cd-surface);
    border-right: 1px solid var(--cd-border);
    color: var(--cd-text);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--cd-border-strong) transparent;
    transition: transform .25s ease;
}
.cd-sidebar .nav { gap: 2px; }
.cd-sidebar .sidebar-section {
    list-style: none;
    padding: .9rem .8rem .35rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--cd-text-muted);
}
.cd-sidebar .sidebar-section:first-child { padding-top: .25rem; }
.cd-sidebar .sidebar-divider {
    list-style: none; height: 1px; margin: .55rem .8rem .2rem;
    background: var(--cd-border); border: 0;
}
.cd-sidebar .nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .8rem;
    border-radius: var(--cd-radius-sm);
    border: 1px solid transparent;
    color: var(--cd-text); font-weight: 600; font-size: .9rem;
    transition: background-color .15s, color .15s, border-color .15s;
}
.cd-sidebar .nav-link .material-icons {
    font-size: 1.25rem; color: var(--cd-text-muted); transition: color .15s;
}
.cd-sidebar .nav-link:hover { background: var(--cd-surface-2); color: var(--cd-brand-800); }
.cd-sidebar .nav-link:hover .material-icons { color: var(--cd-brand-600); }
.cd-sidebar .nav-link.active {
    background: #F6EADC;
    border-color: #E8D2B8;
    color: var(--cd-brand-800);
    font-weight: 700;
}
.cd-sidebar .nav-link.active .material-icons { color: var(--cd-brand-600); }
.cd-sidebar .nav-link--agent .material-icons { color: var(--cd-agent-vocal); }
.cd-sidebar .nav-link--agent.active { background: var(--cd-agent-vocal-soft); border-color: var(--cd-agent-vocal-border); color: var(--cd-agent-vocal-dark); }
.cd-sidebar .nav-link--agent.active .material-icons,
.cd-sidebar .nav-link--agent:hover .material-icons { color: var(--cd-agent-vocal); }
.sidebar-badge {
    margin-left: auto;
    min-width: 1.45rem; height: 1.45rem; padding: 0 .42rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--cd-radius-pill);
    font-size: .7rem; font-weight: 800; line-height: 1;
    background: var(--cd-danger-bg); color: var(--cd-danger-fg);
}
.sidebar-badge.warning { background: var(--cd-warning-bg); color: var(--cd-warning-fg); }
.sidebar-badge.info    { background: var(--cd-info-bg);    color: var(--cd-info-fg); }
.cd-sidebar .user-info {
    margin-top: 1rem;
    display: flex; align-items: center; gap: .65rem;
    padding: .75rem .8rem;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    background: var(--cd-surface-2);
}
.cd-sidebar .user-info .small { font-weight: 700; color: var(--cd-text); line-height: 1.25; }
.cd-sidebar .user-role { font-size: .76rem; color: var(--cd-text-muted); }

.cd-sidebar-backdrop {
    position: fixed; inset: var(--cd-topbar-h) 0 0 0; z-index: 1015;
    background: rgba(43,30,20,.35);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}

.main-content {
    flex: 1 1 auto; min-width: 0;
    min-height: 100vh;
    padding: calc(var(--cd-topbar-h) + 1.75rem) 2rem 3rem;
}
.cd-has-sidebar .main-content { margin-left: var(--cd-sidebar-w); }
.main-content > .cd-container { max-width: 1440px; margin: 0 auto; padding: 0; }

/* Messages flash */
.cd-flash-stack { display: grid; gap: .65rem; margin-bottom: 1.5rem; }
.cd-flash-stack .alert { margin-bottom: 0; }

/* Mobile / tablette : sidebar en off-canvas */
@media (max-width: 991.98px) {
    .cd-topbar { padding: 0 .85rem; gap: .65rem; }
    .cd-topbar__toggle { display: inline-flex; }
    .sidebar.cd-sidebar {
        top: var(--cd-topbar-h);
        transform: translateX(-102%);
        box-shadow: 0 10px 40px rgba(43,30,20,.18);
        width: min(var(--cd-sidebar-w), 86vw);
    }
    body.cd-sidebar-open .sidebar.cd-sidebar { transform: none; }
    body.cd-sidebar-open .cd-sidebar-backdrop { opacity: 1; visibility: visible; }
    .cd-has-sidebar .main-content { margin-left: 0; }
    .main-content { padding: calc(var(--cd-topbar-h) + 1.1rem) 1rem 2.5rem; }
    .cd-brand__sep { display: none; }
    .cd-user__text { display: none; }
}
@media (max-width: 575.98px) {
    .cd-btn-logout .cd-btn-logout__label { display: none; }
    .cd-btn-logout { padding: .5rem; width: 42px; height: 42px; justify-content: center; }
    .cd-brand__name { font-size: 1rem; max-width: 42vw; }
    .cd-topbar__right { gap: .5rem; }
}

/* Dropdown de notifications (classes historiques conservées) */
.notification-dropdown {
    width: 360px; max-width: calc(100vw - 24px);
    max-height: 440px; overflow-y: auto; padding: 0;
}
.notification-dropdown__head {
    display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1rem; border-bottom: 1px solid var(--cd-border);
    font-weight: 800; position: sticky; top: 0; background: var(--cd-surface); z-index: 1;
}
.notification-item {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    color: var(--cd-text);
    transition: background-color .15s;
}
.notification-item:hover { background: var(--cd-surface-2); color: var(--cd-text); }
.notification-item.unread { background: #FDF3E4; }
.notification-item.unread:hover { background: #FAEBD5; }
.notification-icon {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--cd-radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.notification-icon .material-icons { font-size: 1.15rem; }
.notification-icon.facturation  { background: var(--cd-tile-sand-bg);     color: var(--cd-tile-sand-fg); }
.notification-icon.rdv          { background: var(--cd-tile-sky-bg);      color: var(--cd-tile-sky-fg); }
.notification-icon.patient      { background: var(--cd-tile-mint-bg);     color: var(--cd-tile-mint-fg); }
.notification-icon.consultation { background: var(--cd-tile-lavender-bg); color: var(--cd-tile-lavender-fg); }
.notification-icon.alerte       { background: var(--cd-danger-bg);       color: var(--cd-danger-fg); }
.notification-icon.info         { background: var(--cd-neutral-bg);       color: var(--cd-neutral-fg); }
.notification-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--cd-radius-pill);
    background: var(--cd-danger); color: #fff;
    font-size: .66rem; font-weight: 800;
    border: 2px solid var(--cd-surface-2);
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. SURCHARGES BOOTSTRAP (harmonise les pages non refaites)
   ───────────────────────────────────────────────────────────────────────────── */

/* Cartes */
.card {
    --bs-card-bg: var(--cd-surface);
    --bs-card-border-color: var(--cd-border);
    --bs-card-border-radius: var(--cd-radius-lg);
    --bs-card-inner-border-radius: calc(var(--cd-radius-lg) - 1px);
    --bs-card-cap-bg: var(--cd-surface-2);
    --bs-card-cap-padding-y: .9rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.1rem;
    box-shadow: var(--cd-shadow);
}
.card-header { font-weight: 700; color: var(--cd-text); }
.card-title { font-weight: 800; letter-spacing: -.02em; }

/* Boutons */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-border-radius: var(--cd-radius-sm);
    --bs-btn-focus-box-shadow: var(--cd-focus-ring);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn .material-icons { font-size: 1.15em; }
.btn-sm { --bs-btn-padding-x: .7rem; --bs-btn-padding-y: .32rem; --bs-btn-border-radius: 8px; --bs-btn-font-size: .82rem; }
.btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .75rem; --bs-btn-border-radius: var(--cd-radius-md); }
.btn-primary {
    --bs-btn-bg: var(--cd-brand-800); --bs-btn-border-color: var(--cd-brand-800); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--cd-brand-900); --bs-btn-hover-border-color: var(--cd-brand-900); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--cd-brand-900); --bs-btn-active-border-color: var(--cd-brand-900); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--cd-brand-800); --bs-btn-disabled-border-color: var(--cd-brand-800);
}
.btn-secondary {
    --bs-btn-bg: #EFE7DE; --bs-btn-border-color: #E2D6C8; --bs-btn-color: var(--cd-text);
    --bs-btn-hover-bg: #E6DACC; --bs-btn-hover-border-color: #D9C8B5; --bs-btn-hover-color: var(--cd-text);
    --bs-btn-active-bg: #E0D2C2; --bs-btn-active-border-color: #D9C8B5; --bs-btn-active-color: var(--cd-text);
    --bs-btn-disabled-bg: #EFE7DE; --bs-btn-disabled-border-color: #E2D6C8; --bs-btn-disabled-color: var(--cd-text-muted);
}
.btn-success {
    --bs-btn-bg: var(--cd-success); --bs-btn-border-color: var(--cd-success); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #336A53; --bs-btn-hover-border-color: #336A53; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #2D5E49; --bs-btn-active-border-color: #2D5E49;
}
.btn-danger {
    --bs-btn-bg: var(--cd-danger); --bs-btn-border-color: var(--cd-danger); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #9B3B34; --bs-btn-hover-border-color: #9B3B34; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8A332D; --bs-btn-active-border-color: #8A332D;
}
.btn-warning {
    --bs-btn-bg: var(--cd-accent); --bs-btn-border-color: var(--cd-accent); --bs-btn-color: #3B2408;
    --bs-btn-hover-bg: #E8952B; --bs-btn-hover-border-color: #E8952B; --bs-btn-hover-color: #3B2408;
    --bs-btn-active-bg: #DD8A20; --bs-btn-active-border-color: #DD8A20; --bs-btn-active-color: #3B2408;
}
.btn-info {
    --bs-btn-bg: var(--cd-info); --bs-btn-border-color: var(--cd-info); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #3E5E77; --bs-btn-hover-border-color: #3E5E77; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #365368; --bs-btn-active-border-color: #365368; --bs-btn-active-color: #fff;
}
.btn-light {
    --bs-btn-bg: var(--cd-surface); --bs-btn-border-color: var(--cd-border); --bs-btn-color: var(--cd-text);
    --bs-btn-hover-bg: var(--cd-surface-2); --bs-btn-hover-border-color: var(--cd-border-strong); --bs-btn-hover-color: var(--cd-text);
}
.btn-dark {
    --bs-btn-bg: var(--cd-text); --bs-btn-border-color: var(--cd-text);
    --bs-btn-hover-bg: #3D2B1E; --bs-btn-hover-border-color: #3D2B1E;
}
.btn-outline-primary {
    --bs-btn-color: var(--cd-brand-800); --bs-btn-border-color: var(--cd-border-strong); --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-surface-2); --bs-btn-hover-border-color: var(--cd-brand-400); --bs-btn-hover-color: var(--cd-brand-800);
    --bs-btn-active-bg: #F6EADC; --bs-btn-active-border-color: var(--cd-brand-400); --bs-btn-active-color: var(--cd-brand-800);
}
.btn-outline-secondary {
    --bs-btn-color: var(--cd-text); --bs-btn-border-color: var(--cd-border-strong); --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-surface-2); --bs-btn-hover-border-color: var(--cd-brand-400); --bs-btn-hover-color: var(--cd-brand-800);
    --bs-btn-active-bg: #F6EADC; --bs-btn-active-border-color: var(--cd-brand-400); --bs-btn-active-color: var(--cd-brand-800);
}
.btn-outline-success {
    --bs-btn-color: var(--cd-success-fg); --bs-btn-border-color: #BFDECF; --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-success-bg); --bs-btn-hover-border-color: var(--cd-success); --bs-btn-hover-color: var(--cd-success-fg);
    --bs-btn-active-bg: var(--cd-success); --bs-btn-active-border-color: var(--cd-success); --bs-btn-active-color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--cd-danger-fg); --bs-btn-border-color: #EDC3BF; --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-danger-bg); --bs-btn-hover-border-color: var(--cd-danger); --bs-btn-hover-color: var(--cd-danger-fg);
    --bs-btn-active-bg: var(--cd-danger); --bs-btn-active-border-color: var(--cd-danger); --bs-btn-active-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--cd-warning-fg); --bs-btn-border-color: #F4D6A6; --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-warning-bg); --bs-btn-hover-border-color: var(--cd-accent); --bs-btn-hover-color: var(--cd-warning-fg);
    --bs-btn-active-bg: var(--cd-accent); --bs-btn-active-border-color: var(--cd-accent); --bs-btn-active-color: #3B2408;
}
.btn-outline-info {
    --bs-btn-color: var(--cd-info-fg); --bs-btn-border-color: #C3D6E4; --bs-btn-bg: var(--cd-surface);
    --bs-btn-hover-bg: var(--cd-info-bg); --bs-btn-hover-border-color: var(--cd-info); --bs-btn-hover-color: var(--cd-info-fg);
    --bs-btn-active-bg: var(--cd-info); --bs-btn-active-border-color: var(--cd-info); --bs-btn-active-color: #fff;
}
.btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--cd-text); --bs-btn-border-color: var(--cd-border-strong);
    --bs-btn-hover-bg: var(--cd-surface-2); --bs-btn-hover-border-color: var(--cd-brand-400); --bs-btn-hover-color: var(--cd-brand-800);
}
.btn-link { --bs-btn-color: var(--cd-brand-800); --bs-btn-hover-color: var(--cd-brand-600); font-weight: 600; }

/* Formulaires */
.form-label, label.form-label { font-weight: 700; font-size: .88rem; color: var(--cd-text); margin-bottom: .45rem; }
.form-control, .form-select {
    border-radius: var(--cd-radius-md);
    border: 1px solid var(--cd-border-strong);
    background-color: #fff;
    color: var(--cd-text);
    padding: .65rem .95rem;
    font-size: .94rem;
    transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 2.4rem; }
.form-control-sm, .form-select-sm { padding: .4rem .7rem; font-size: .84rem; border-radius: var(--cd-radius-sm); }
.form-control-lg, .form-select-lg { padding: .8rem 1.1rem; border-radius: var(--cd-radius-md); }
.form-control::placeholder { color: #A99886; }
.form-control:focus, .form-select:focus {
    border-color: var(--cd-brand-400);
    box-shadow: var(--cd-focus-ring);
    background-color: #fff;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--cd-surface-2); color: var(--cd-text-muted); }
.form-text { color: var(--cd-text-muted); font-size: .82rem; }
.form-check-input { border-color: var(--cd-border-strong); }
.form-check-input:checked { background-color: var(--cd-brand-800); border-color: var(--cd-brand-800); }
.form-check-input:focus { border-color: var(--cd-brand-400); box-shadow: var(--cd-focus-ring); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23D18A3A'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--cd-brand-600); }
.form-range::-moz-range-thumb { background-color: var(--cd-brand-600); }
.input-group-text {
    background: var(--cd-surface-2); border-color: var(--cd-border-strong); color: var(--cd-text-muted);
    border-radius: var(--cd-radius-md);
}
.invalid-feedback { font-size: .82rem; }
.errorlist { list-style: none; padding: 0; margin: .35rem 0 0; color: var(--cd-danger-fg); font-size: .82rem; font-weight: 600; }

/* Tableaux */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cd-text);
    --bs-table-border-color: var(--cd-border);
    --bs-table-striped-bg: rgba(242,165,65,.05);
    --bs-table-hover-bg: rgba(242,165,65,.07);
    --bs-table-hover-color: var(--cd-text);
    --bs-table-active-bg: rgba(242,165,65,.10);
    vertical-align: middle;
}
.table > thead th, .table > thead td {
    font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--cd-text-muted);
    border-bottom-color: var(--cd-border);
}
.table-light, .table > thead.table-light {
    --bs-table-bg: var(--cd-surface-2); --bs-table-color: var(--cd-text-muted); --bs-table-border-color: var(--cd-border);
}
.table-dark { --bs-table-bg: var(--cd-text); --bs-table-border-color: #3D2B1E; }

/* Badges */
.badge { border-radius: var(--cd-radius-pill); font-weight: 700; letter-spacing: .01em; padding: .38em .7em; }
.badge.bg-warning { color: #3B2408 !important; }

/* Alertes */
.alert {
    --bs-alert-border-radius: var(--cd-radius-md);
    --bs-alert-padding-x: 1.1rem;
    --bs-alert-padding-y: .85rem;
    border-width: 1px; font-weight: 500;
}
.alert-success { --bs-alert-bg: var(--cd-success-bg); --bs-alert-color: var(--cd-success-fg); --bs-alert-border-color: #BFDECF; --bs-alert-link-color: var(--cd-success-fg); }
.alert-warning { --bs-alert-bg: var(--cd-warning-bg); --bs-alert-color: var(--cd-warning-fg); --bs-alert-border-color: #F4D6A6; --bs-alert-link-color: var(--cd-warning-fg); }
.alert-danger, .alert-error { --bs-alert-bg: var(--cd-danger-bg); --bs-alert-color: var(--cd-danger-fg); --bs-alert-border-color: #EDC3BF; --bs-alert-link-color: var(--cd-danger-fg); }
.alert-info, .alert-debug { --bs-alert-bg: var(--cd-info-bg); --bs-alert-color: var(--cd-info-fg); --bs-alert-border-color: #C3D6E4; --bs-alert-link-color: var(--cd-info-fg); }
.alert-primary { --bs-alert-bg: #F6EADC; --bs-alert-color: var(--cd-brand-800); --bs-alert-border-color: #E8D2B8; --bs-alert-link-color: var(--cd-brand-800); }
.alert-secondary, .alert-light { --bs-alert-bg: var(--cd-surface-2); --bs-alert-color: var(--cd-text); --bs-alert-border-color: var(--cd-border); }
/* .alert-error / .alert-debug (tags Django sans équivalent Bootstrap) sont couverts ci-dessus */
.alert-dismissible { padding-right: 3rem; }

/* Pagination */
.pagination {
    --bs-pagination-color: var(--cd-brand-800);
    --bs-pagination-bg: var(--cd-surface);
    --bs-pagination-border-color: var(--cd-border);
    --bs-pagination-hover-color: var(--cd-brand-800);
    --bs-pagination-hover-bg: var(--cd-surface-2);
    --bs-pagination-hover-border-color: var(--cd-border-strong);
    --bs-pagination-focus-color: var(--cd-brand-800);
    --bs-pagination-focus-bg: var(--cd-surface-2);
    --bs-pagination-focus-box-shadow: var(--cd-focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--cd-brand-800);
    --bs-pagination-active-border-color: var(--cd-brand-800);
    --bs-pagination-disabled-color: #B3A493;
    --bs-pagination-disabled-bg: var(--cd-surface-2);
    --bs-pagination-disabled-border-color: var(--cd-border);
    --bs-pagination-border-radius: var(--cd-radius-sm);
    gap: .3rem;
}
.pagination .page-link { border-radius: var(--cd-radius-sm) !important; font-weight: 600; min-width: 2.3rem; text-align: center; }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }

/* Onglets / pills Bootstrap */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--cd-border);
    --bs-nav-tabs-border-radius: var(--cd-radius-sm);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--cd-border);
    --bs-nav-tabs-link-active-color: var(--cd-brand-800);
    --bs-nav-tabs-link-active-bg: var(--cd-surface);
    --bs-nav-tabs-link-active-border-color: var(--cd-border) var(--cd-border) var(--cd-surface);
    gap: .25rem;
}
.nav-tabs .nav-link { color: var(--cd-text-muted); font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--cd-brand-800); }
.nav-tabs .nav-link.active { font-weight: 700; }
.nav-pills {
    --bs-nav-pills-border-radius: var(--cd-radius-sm);
    --bs-nav-pills-link-active-bg: var(--cd-brand-800);
    --bs-nav-pills-link-active-color: #fff;
}
.nav-pills .nav-link { color: var(--cd-text); font-weight: 600; }
.nav-link { --bs-nav-link-color: var(--cd-brand-800); --bs-nav-link-hover-color: var(--cd-brand-600); }

/* Dropdown */
.dropdown-menu {
    --bs-dropdown-bg: var(--cd-surface);
    --bs-dropdown-border-color: var(--cd-border);
    --bs-dropdown-border-radius: var(--cd-radius-md);
    --bs-dropdown-inner-border-radius: calc(var(--cd-radius-md) - 1px);
    --bs-dropdown-box-shadow: 0 12px 32px rgba(43,30,20,.12);
    --bs-dropdown-link-color: var(--cd-text);
    --bs-dropdown-link-hover-bg: var(--cd-surface-2);
    --bs-dropdown-link-hover-color: var(--cd-brand-800);
    --bs-dropdown-link-active-bg: var(--cd-brand-800);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-divider-bg: var(--cd-border);
    --bs-dropdown-header-color: var(--cd-text-muted);
    box-shadow: var(--bs-dropdown-box-shadow);
    overflow: hidden;
}
.dropdown-item { font-weight: 500; }

/* Modales */
.modal {
    --bs-modal-bg: var(--cd-surface);
    --bs-modal-border-color: var(--cd-border);
    --bs-modal-border-radius: var(--cd-radius-xl);
    --bs-modal-inner-border-radius: calc(var(--cd-radius-xl) - 1px);
    --bs-modal-header-border-color: var(--cd-border);
    --bs-modal-footer-border-color: var(--cd-border);
    --bs-modal-header-padding: 1.15rem 1.5rem;
    --bs-modal-padding: 1.5rem;
    --bs-modal-box-shadow: 0 24px 60px rgba(43,30,20,.22);
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal-title { font-weight: 800; letter-spacing: -.02em; }
.modal-backdrop { --bs-backdrop-bg: #2B1E14; --bs-backdrop-opacity: .45; }

/* Divers */
.list-group {
    --bs-list-group-bg: var(--cd-surface);
    --bs-list-group-border-color: var(--cd-border);
    --bs-list-group-border-radius: var(--cd-radius-md);
    --bs-list-group-action-hover-bg: var(--cd-surface-2);
    --bs-list-group-active-bg: var(--cd-brand-800);
    --bs-list-group-active-border-color: var(--cd-brand-800);
}
.progress { --bs-progress-bg: #EFE7DE; --bs-progress-bar-bg: var(--cd-brand-600); --bs-progress-border-radius: var(--cd-radius-pill); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--cd-text-muted); --bs-breadcrumb-item-active-color: var(--cd-text); font-weight: 600; font-size: .9rem; }
.tooltip { --bs-tooltip-bg: var(--cd-text); --bs-tooltip-border-radius: 8px; }
.popover { --bs-popover-bg: var(--cd-surface); --bs-popover-border-color: var(--cd-border); --bs-popover-border-radius: var(--cd-radius-md); }
.toast { --bs-toast-bg: var(--cd-surface); --bs-toast-border-color: var(--cd-border); --bs-toast-border-radius: var(--cd-radius-md); }
.accordion {
    --bs-accordion-bg: var(--cd-surface);
    --bs-accordion-border-color: var(--cd-border);
    --bs-accordion-border-radius: var(--cd-radius-md);
    --bs-accordion-inner-border-radius: calc(var(--cd-radius-md) - 1px);
    --bs-accordion-active-bg: #F6EADC;
    --bs-accordion-active-color: var(--cd-brand-800);
    --bs-accordion-btn-focus-box-shadow: var(--cd-focus-ring);
}
.bg-white { background-color: var(--cd-surface) !important; }
.shadow-sm { box-shadow: var(--cd-shadow) !important; }
.rounded-3 { border-radius: var(--cd-radius-md) !important; }
.rounded-4 { border-radius: var(--cd-radius-lg) !important; }


/* ─────────────────────────────────────────────────────────────────────────────
   5. COMPOSANTS cd-*
   ───────────────────────────────────────────────────────────────────────────── */

/* 5.1 Hero ---------------------------------------------------------------- */
.cd-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem;
    padding: 2rem 2.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--cd-radius-xl);
    background: var(--cd-hero);
    color: #fff;
    box-shadow: var(--cd-shadow-hero);
}
.cd-hero::after {           /* léger voile lumineux, purement décoratif */
    content: ""; position: absolute; z-index: -1; inset: -40% -10% auto auto;
    width: 55%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0));
    pointer-events: none;
}
.cd-hero__main { flex: 1 1 320px; min-width: 0; }
.cd-hero__eyebrow {
    font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,.88); margin-bottom: .45rem;
}
.cd-hero__title {
    margin: 0; color: #fff;
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.55rem);
    font-weight: 800; letter-spacing: -.04em; line-height: 1.08;
    text-shadow: 0 1px 2px rgba(110,69,32,.18);
}
.cd-hero__subtitle { margin: .55rem 0 0; color: rgba(255,255,255,.92); font-size: 1rem; font-weight: 500; }
.cd-hero__stats { display: flex; flex-wrap: wrap; gap: .75rem; }
.cd-hero__stat {
    min-width: 120px; padding: .85rem 1.2rem; text-align: center;
    border-radius: var(--cd-radius-lg);
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.38);
    display: flex; flex-direction: column; gap: .1rem;
}
.cd-hero__stat-value { font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.cd-hero__stat-label { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.9); }
.cd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-left: auto; }
.cd-hero--compact { padding: 1.5rem 1.75rem; }
.cd-hero--agent { background: linear-gradient(110deg, var(--cd-agent-vocal-dark) 0%, var(--cd-agent-vocal) 100%); box-shadow: 0 14px 34px rgba(75,46,122,.22); }

/* 5.2 Boutons hero ---------------------------------------------------------- */
.cd-btn-light, .cd-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.3rem;
    border-radius: var(--cd-radius-md);
    font-weight: 700; font-size: .95rem; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, box-shadow .15s, transform .15s, border-color .15s;
}
.cd-btn-light .material-icons, .cd-btn-ghost .material-icons { font-size: 1.2rem; }
.cd-btn-light {
    background: #fff; color: var(--cd-text);
    border: 1px solid #fff;
    box-shadow: 0 6px 16px rgba(110,69,32,.18);
}
.cd-btn-light:hover { background: #FFF8EF; color: var(--cd-brand-800); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(110,69,32,.22); }
.cd-btn-ghost {
    background: rgba(255,255,255,.16); color: #fff;
    border: 1px solid rgba(255,255,255,.6);
}
.cd-btn-ghost:hover { background: rgba(255,255,255,.26); border-color: #fff; color: #fff; }
.cd-btn-light:focus-visible, .cd-btn-ghost:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cd-btn-icon {
    width: 2.1rem; height: 2.1rem; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
}
.cd-btn-icon .material-icons { font-size: 1.05rem; }
.btn-sm.cd-btn-icon { width: 2rem; height: 2rem; }

/* 5.3 Carte ------------------------------------------------------------------ */
.cd-card {
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    min-width: 0;
}
.cd-card__header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
    padding: 1.4rem 1.6rem .9rem;
}
.cd-card__header > :first-child { min-width: 0; }
.cd-card__title {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.025em; color: var(--cd-text);
}
.cd-card__title .material-icons { font-size: 1.3rem; color: var(--cd-brand-600); }
.cd-card__subtitle { margin: .3rem 0 0; color: var(--cd-text-muted); font-size: .9rem; }
.cd-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cd-card__link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-weight: 700; font-size: .88rem; color: var(--cd-brand-800); text-decoration: none;
}
.cd-card__link:hover { color: var(--cd-brand-600); }
.cd-card__link .material-icons { font-size: 1.05rem; }
.cd-card__body { padding: .4rem 1.6rem 1.6rem; }
.cd-card__header + .cd-card__body--flush { border-top: 1px solid var(--cd-border); }
.cd-card__body--flush { padding: 0; }
.cd-card__footer { padding: 1rem 1.6rem; border-top: 1px solid var(--cd-border); background: var(--cd-surface-2); }
.cd-card--link { display: block; color: inherit; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.cd-card--link:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--cd-shadow-hover); border-color: var(--cd-border-strong); }

/* Variante agent vocal (violet distinctif) */
.cd-card--agent { border-color: var(--cd-agent-vocal-border); }
.cd-card--agent > .cd-card__header {
    background: linear-gradient(110deg, var(--cd-agent-vocal-dark) 0%, var(--cd-agent-vocal) 100%);
    color: #fff; padding-bottom: 1.2rem;
}
.cd-card--agent > .cd-card__header .cd-card__title,
.cd-card--agent > .cd-card__header .cd-card__title .material-icons { color: #fff; }
.cd-card--agent > .cd-card__header .cd-card__subtitle { color: rgba(255,255,255,.85); }
.cd-card--agent > .cd-card__header + .cd-card__body--flush { border-top: 0; }
.cd-card--agent .cd-table > thead th { background: var(--cd-agent-vocal-soft); color: #5B3D8A; }

/* 5.4 Pastilles d'icônes & KPI ------------------------------------------------ */
.cd-tile {
    width: 52px; height: 52px; flex: 0 0 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--cd-tile-sand-bg); color: var(--cd-tile-sand-fg);
}
.cd-tile .material-icons { font-size: 1.5rem; }
.cd-tile--sm { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.cd-tile--sm .material-icons { font-size: 1.15rem; }
.cd-tile--lg { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; }
.cd-tile--lg .material-icons { font-size: 1.9rem; }
.cd-tile--rose     { background: var(--cd-tile-rose-bg);     color: var(--cd-tile-rose-fg); }
.cd-tile--mint     { background: var(--cd-tile-mint-bg);     color: var(--cd-tile-mint-fg); }
.cd-tile--sand     { background: var(--cd-tile-sand-bg);     color: var(--cd-tile-sand-fg); }
.cd-tile--lavender { background: var(--cd-tile-lavender-bg); color: var(--cd-tile-lavender-fg); }
.cd-tile--sky      { background: var(--cd-tile-sky-bg);      color: var(--cd-tile-sky-fg); }
.cd-tile--agent    { background: var(--cd-agent-vocal-soft); color: var(--cd-agent-vocal); }

.cd-kpi-grid {
    display: grid; gap: 1rem; margin-bottom: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cd-kpi {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.3rem 1.35rem;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-xl);
    box-shadow: var(--cd-shadow);
    color: var(--cd-text); text-decoration: none;
    min-width: 0; height: 100%;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
a.cd-kpi:hover { color: var(--cd-text); transform: translateY(-2px); box-shadow: var(--cd-shadow-hover); border-color: var(--cd-border-strong); }
.cd-kpi__content { min-width: 0; }
.cd-kpi__label { font-size: .9rem; font-weight: 500; color: var(--cd-text-muted); line-height: 1.3; }
.cd-kpi__value { font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: -.035em; color: var(--cd-text); margin-top: .1rem; }
.cd-kpi__hint { font-size: .8rem; color: var(--cd-text-muted); margin-top: .15rem; line-height: 1.3; }

/* 5.5 Onglets « VUES » --------------------------------------------------------- */
.cd-tabs {
    display: flex; align-items: center; gap: .35rem;
    padding: .55rem .65rem;
    margin-bottom: 1.5rem;
    background: var(--cd-surface);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-lg);
    box-shadow: var(--cd-shadow);
    overflow-x: auto; scrollbar-width: none;
}
.cd-tabs::-webkit-scrollbar { display: none; }
.cd-tabs__label {
    flex: 0 0 auto; padding: 0 .75rem 0 .5rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cd-text-muted);
}
.cd-tab {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .6rem 1rem;
    border-radius: var(--cd-radius-md);
    border: 1px solid transparent;
    color: var(--cd-text); font-weight: 600; font-size: .93rem;
    text-decoration: none; white-space: nowrap;
    background: transparent; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.cd-tab .material-icons { font-size: 1.2rem; color: var(--cd-brand-600); }
.cd-tab:hover { background: var(--cd-surface-2); color: var(--cd-brand-800); }
.cd-tab--active, .cd-tab.active {
    border-color: var(--cd-brand-400);
    color: var(--cd-brand-800); font-weight: 700;
    background: #FFF8EF;
}
.cd-tab--agent .material-icons { color: var(--cd-agent-vocal); }

/* 5.6 Tableau ------------------------------------------------------------------ */
.cd-table { margin-bottom: 0; }
.cd-table > thead th {
    background: var(--cd-surface-2);
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--cd-border);
    white-space: nowrap;
}
.cd-table > tbody td { padding: .85rem 1rem; border-color: var(--cd-border); }
.cd-table > :not(caption) > * > *:first-child { padding-left: 1.6rem; }
.cd-table > :not(caption) > * > *:last-child { padding-right: 1.6rem; }
.cd-table > tbody > tr:last-child > td { border-bottom: 0; }
.cd-table__primary { font-weight: 700; color: var(--cd-text); text-decoration: none; }
a.cd-table__primary:hover { color: var(--cd-brand-600); }
.cd-table__secondary { display: block; font-size: .82rem; color: var(--cd-text-muted); }
.cd-table__actions { display: inline-flex; gap: .35rem; justify-content: center; flex-wrap: nowrap; }
.cd-table tr.cd-row-agent > td { background: var(--cd-agent-vocal-soft); }
.cd-table tr.cd-row-agent > td:first-child { box-shadow: inset 4px 0 0 var(--cd-agent-vocal); }

/* 5.7 Badges & compteurs --------------------------------------------------------- */
.cd-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .28rem .7rem;
    border-radius: var(--cd-radius-pill);
    font-size: .76rem; font-weight: 700; line-height: 1.25; white-space: nowrap;
    background: var(--cd-neutral-bg); color: var(--cd-neutral-fg);
    border: 1px solid transparent;
}
.cd-badge .material-icons { font-size: .95rem; }
.cd-badge--dot::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .8; }
.cd-badge--success, .cd-badge--confirme, .cd-badge--rdv_pris,
.cd-badge--traitee, .cd-badge--converti                   { background: var(--cd-success-bg); color: var(--cd-success-fg); }
.cd-badge--warning, .cd-badge--en_attente,
.cd-badge--a_traiter, .cd-badge--rappel_demande           { background: var(--cd-warning-bg); color: var(--cd-warning-fg); }
.cd-badge--danger, .cd-badge--annule, .cd-badge--refuse, .cd-badge--erreur { background: var(--cd-danger-bg); color: var(--cd-danger-fg); }
.cd-badge--info, .cd-badge--honore, .cd-badge--contacte,
.cd-badge--prevenu, .cd-badge--rdv_modifie, .cd-badge--liste_attente { background: var(--cd-info-bg); color: var(--cd-info-fg); }
.cd-badge--neutral, .cd-badge--absent, .cd-badge--sans_rdv,
.cd-badge--expire, .cd-badge--rdv_annule                  { background: var(--cd-neutral-bg); color: var(--cd-neutral-fg); }
.cd-badge--brand  { background: #F6EADC; color: var(--cd-brand-800); }
.cd-badge--outline { background: var(--cd-surface); border-color: var(--cd-border-strong); color: var(--cd-text-muted); }
.cd-badge--agent  { background: var(--cd-agent-vocal-soft); color: #5B3D8A; }
.cd-badge--agent-solid { background: var(--cd-agent-vocal); color: #fff; }

.cd-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem;
    border-radius: var(--cd-radius-pill);
    background: #F3E6D8; color: var(--cd-brand-800);
    font-size: .76rem; font-weight: 800; line-height: 1; letter-spacing: 0;
    vertical-align: middle;
}
.cd-count--danger  { background: var(--cd-danger); color: #fff; }
.cd-count--warning { background: var(--cd-warning-bg); color: var(--cd-warning-fg); }
.cd-count--info    { background: var(--cd-info-bg); color: var(--cd-info-fg); }
.cd-count--agent   { background: var(--cd-agent-vocal); color: #fff; }
.cd-count--on-dark { background: #fff; color: var(--cd-agent-vocal-dark); }

/* 5.8 Titre de section ------------------------------------------------------------- */
.cd-section-title {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    margin: 0 0 1rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -.025em; color: var(--cd-text);
}
.cd-section-title .material-icons { font-size: 1.35rem; color: var(--cd-brand-600); }

/* 5.9 État vide --------------------------------------------------------------------- */
.cd-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 2.75rem 1.5rem;
    color: var(--cd-text-muted);
}
.cd-empty .cd-tile { margin-bottom: .4rem; }
.cd-empty__title { font-weight: 800; font-size: 1.05rem; color: var(--cd-text); letter-spacing: -.02em; }
.cd-empty__text { margin: 0 0 .5rem; max-width: 42ch; font-size: .9rem; }

/* 5.10 Callout ------------------------------------------------------------------------ */
.cd-callout {
    display: flex; align-items: center; flex-wrap: wrap; gap: .9rem 1.1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--cd-radius-lg);
    border: 1px solid var(--cd-border);
    border-left-width: 5px;
    background: var(--cd-surface);
    box-shadow: var(--cd-shadow);
}
.cd-callout__body { flex: 1 1 260px; min-width: 0; color: var(--cd-text); }
.cd-callout__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cd-callout--warning { background: #FFF7EA; border-color: #F4D6A6; border-left-color: var(--cd-accent); }
.cd-callout--info    { background: #F3F8FB; border-color: #C3D6E4; border-left-color: var(--cd-info); }
.cd-callout--success { background: #F2F9F5; border-color: #BFDECF; border-left-color: var(--cd-success); }
.cd-callout--danger  { background: #FCF2F1; border-color: #EDC3BF; border-left-color: var(--cd-danger); }
.cd-callout--agent   { background: var(--cd-agent-vocal-soft); border-color: var(--cd-agent-vocal-border); border-left-color: var(--cd-agent-vocal); }
/* Bandeau rouge plein : alerte critique non traitée (agent vocal) — base.html, gérants uniquement */
.cd-callout--critique { background: var(--cd-danger); border-color: var(--cd-danger-fg); border-left-color: var(--cd-danger-fg); color: #fff; }
.cd-callout--critique .cd-callout__body { color: #fff; }
.cd-callout--critique .cd-tile { background: rgba(255,255,255,.18); color: #fff; }
.cd-callout--critique .btn { background: #fff; color: var(--cd-danger-fg); border-color: #fff; font-weight: 700; }
.cd-callout--critique .btn:hover { background: var(--cd-danger-bg); color: var(--cd-danger-fg); }
.cd-callout--pulse { animation: cd-pulse-border 2.2s ease-in-out infinite; }
@keyframes cd-pulse-border { 0%,100% { border-left-color: var(--cd-accent); } 50% { border-left-color: var(--cd-brand-600); } }

/* 5.11 Formulaires ----------------------------------------------------------------------- */
.cd-form-grid {
    display: grid; gap: 1.1rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.cd-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .cd-form-grid--2, .cd-form-grid--3 { grid-template-columns: 1fr; } }
.cd-field { display: flex; flex-direction: column; min-width: 0; }
.cd-field--full { grid-column: 1 / -1; }
.cd-label { display: block; font-weight: 700; font-size: .88rem; color: var(--cd-text); margin-bottom: .45rem; }
.cd-label--required::after { content: " *"; color: var(--cd-danger); }
.cd-help { font-size: .82rem; color: var(--cd-text-muted); margin-top: .35rem; line-height: 1.45; }
.cd-form-section + .cd-form-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--cd-border); }
.cd-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem; }

/* 5.12 Actions rapides --------------------------------------------------------------------- */
.cd-quick-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cd-quick {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1rem;
    border-radius: var(--cd-radius-md);
    border: 1px solid var(--cd-border);
    background: var(--cd-surface-2);
    color: var(--cd-text); font-weight: 700; font-size: .92rem; text-decoration: none;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.cd-quick:hover { border-color: var(--cd-brand-400); background: #FFF8EF; color: var(--cd-brand-800); transform: translateY(-1px); }
.cd-quick .cd-count { margin-left: auto; }


/* 5.13 Liste (notifications, flux, éléments empilés) — ajout phase 2 ------------ */
.cd-list { display: flex; flex-direction: column; }
.cd-list__item {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: 1rem 1.6rem;
    border-bottom: 1px solid var(--cd-border);
    color: var(--cd-text); text-decoration: none;
    transition: background-color .15s;
}
.cd-list__item:last-child { border-bottom: 0; }
a.cd-list__item:hover { background: var(--cd-surface-2); color: var(--cd-text); }
.cd-list__item--unread { background: #FDF3E4; box-shadow: inset 4px 0 0 var(--cd-accent); }
a.cd-list__item--unread:hover { background: #FAEBD5; }
.cd-list__body { flex: 1 1 auto; min-width: 0; }
.cd-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.cd-list__title { font-weight: 600; color: var(--cd-text); }
.cd-list__meta { font-size: .8rem; color: var(--cd-text-muted); white-space: nowrap; }
.cd-list__text { margin: .2rem 0 .4rem; font-size: .88rem; color: var(--cd-text-muted); }
.cd-list__text:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) { .cd-list__item { padding: .9rem 1.15rem; } }

/* 5.14 Liste de définitions (fiche « libellé : valeur ») — ajout phase 2 ---------- */
.cd-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: .55rem 1.25rem; margin: 0; }
.cd-dl dt { font-weight: 600; color: var(--cd-text-muted); font-size: .88rem; }
.cd-dl dd { margin: 0; color: var(--cd-text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .cd-dl { grid-template-columns: 1fr; gap: .15rem; } .cd-dl dd { margin-bottom: .55rem; } }

/* 5.15 Panneau en retrait (bloc dans une carte) — ajout phase 2 ------------------ */
.cd-panel {
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-md);
    padding: 14px 16px;
    min-width: 0;
}
.cd-panel--white { background: #fff; }
.cd-panel__label {
    font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cd-text-muted); margin-bottom: .3rem;
}
.cd-panel__value { font-size: 1.9rem; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--cd-text); }

/* 5.16 Boîte média (aperçu logo / image) — ajout phase 2 ------------------------- */
.cd-media-box {
    width: 84px; height: 84px; flex: 0 0 84px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 2px dashed var(--cd-border-strong); border-radius: var(--cd-radius-md);
    background: #fff; color: var(--cd-brand-400);
}
.cd-media-box img { max-width: 78px; max-height: 78px; object-fit: contain; }
.cd-media-box .material-icons { font-size: 2.4rem; }

/* 5.17 Bouton violet agent vocal — ajout phase 2 ---------------------------------- */
.btn.cd-btn-agent {
    --bs-btn-bg: var(--cd-agent-vocal); --bs-btn-border-color: var(--cd-agent-vocal); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--cd-agent-vocal-dark); --bs-btn-hover-border-color: var(--cd-agent-vocal-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--cd-agent-vocal-dark); --bs-btn-active-border-color: var(--cd-agent-vocal-dark); --bs-btn-active-color: #fff;
    --bs-btn-focus-box-shadow: 0 0 0 .22rem rgba(109,76,159,.25);
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. UTILITAIRES
   ───────────────────────────────────────────────────────────────────────────── */
.cd-text-muted { color: var(--cd-text-muted) !important; }
.cd-text-brand { color: var(--cd-brand-800) !important; }
.cd-text-agent { color: var(--cd-agent-vocal-dark) !important; }
.cd-stack { display: grid; gap: 1.5rem; }
.cd-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; overflow-wrap: anywhere; }
.cd-icon-agent { color: var(--cd-agent-vocal) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 575.98px) {
    .cd-hero { padding: 1.5rem 1.25rem; border-radius: var(--cd-radius-lg); }
    .cd-hero__actions { margin-left: 0; width: 100%; }
    .cd-hero__actions > * { flex: 1 1 auto; }
    .cd-card { border-radius: var(--cd-radius-lg); }
    .cd-card__header { padding: 1.15rem 1.15rem .75rem; }
    .cd-card__body { padding: .35rem 1.15rem 1.15rem; }
    .cd-card__body--flush { padding: 0; }
    .cd-table > :not(caption) > * > *:first-child { padding-left: 1.15rem; }
    .cd-table > :not(caption) > * > *:last-child { padding-right: 1.15rem; }
    .cd-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
    .cd-kpi { padding: 1rem; gap: .8rem; }
    .cd-kpi__value { font-size: 1.65rem; }
}