/* ============================================================
   TCF Core — fondations partagées (Phase 1, 2026-04-16)
   Zéro régression visuelle : tokens identiques à l'actuel.
   Chargé AVANT les <style> inline de chaque page → les styles
   inline (unlayered) gagnent toujours. Ce fichier ne fait
   qu'exposer la charte en un point unique + préparer @layer.
   ============================================================ */

@layer tokens, base, components, utilities, legacy;

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* ===== Charte TCF Brand 2023 (source de vérité) ===== */
    --tcf-blue:        #0D4E7F;
    --tcf-blue-2:      #5985BC;
    --tcf-blue-3:      #678FC6;
    --tcf-blue-l:      #A4C3DC;
    --tcf-blue-d:      #0A3D63;
    --tcf-lavande:     #9889C1;
    --tcf-lavande-l:   #D9D8E8;
    --tcf-anis:        #CADC3F;
    --tcf-anis-l:      #D9E9BA;
    --tcf-anis-d:      #A8BC2A;
    --tcf-grey:        #636464;
    --tcf-grey-l:      #D3D6D6;

    /* ===== Alias sémantiques (utilisés dans le code existant) ===== */
    --tcf-bg:          #F4F6FA;
    --tcf-surface:     #FFFFFF;
    --tcf-card:        #FFFFFF;
    --tcf-card-alt:    #F1F5F9;
    --tcf-border:      #E2E8F0;
    --tcf-border-2:    #CBD5E1;

    --tcf-text:        #0D1B2A;
    --tcf-text-2:      #475569;
    --tcf-text-3:      #94A3B8;

    /* Sémantique état */
    --tcf-green:       #16A34A;
    --tcf-green-l:     #22C55E;
    --tcf-orange:      #F59E0B;
    --tcf-orange-d:    #D97706;
    --tcf-red:         #DC2626;
    --tcf-red-l:       #EF4444;

    /* ===== Tokens sémantiques (audit DS Phase 1, 2026-04-30) =====
       Couleurs Tailwind infiltrées dans le code → tokens uniques.
       Toute nouvelle règle DOIT consommer ces tokens, pas les hex. */
    --tcf-danger:      #DC2626;   /* rouge primaire (alerte/erreur) */
    --tcf-danger-l:    #FEE2E2;   /* rouge pâle fond */
    --tcf-danger-d:    #B91C1C;   /* rouge accentué hover */
    --tcf-warning:     #F59E0B;   /* orange primaire (avertissement) */
    --tcf-warning-l:   #FEF3C7;   /* orange pâle fond */
    --tcf-warning-d:   #D97706;   /* orange accentué */
    --tcf-info:        #2563EB;   /* bleu info — distinct charte #0D4E7F (réservé branding) */
    --tcf-info-l:      #DBEAFE;   /* bleu info pâle fond */
    --tcf-success:     #10B981;   /* vert succès */
    --tcf-success-l:   #D1FAE5;   /* vert pâle fond */
    --tcf-success-d:   #059669;   /* vert accentué */
    --tcf-grey-2:      #6B7280;   /* gris medium texte secondaire */
    --tcf-slate:       #94A3B8;   /* gris-bleu placeholder/désactivé */

    /* Ombres */
    --tcf-shadow:      0 4px 14px rgba(13,78,127,.08), 0 1px 3px rgba(13,78,127,.04);
    --tcf-shadow-l:    0 18px 48px rgba(13,78,127,.16), 0 6px 16px rgba(13,78,127,.08);
    --tcf-blue-glow:   rgba(13,78,127,.16);

    /* Radius */
    --tcf-radius:      11px;
    --tcf-radius-l:    18px;

    /* Typographie — emoji fallback explicite pour Android/Linux et iOS WKWebView */
    --tcf-font-head:   'Oswald','Montserrat',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','EmojiOne Color','Twemoji Mozilla',emoji;
    --tcf-font-body:   'Montserrat',-apple-system,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','EmojiOne Color','Twemoji Mozilla',emoji;
    --tcf-font-mono:   'JetBrains Mono','DM Mono',monospace,'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',emoji;
  }

  /* Dark mode — déjà géré par les <style> inline des pages.
     Les tokens ici servent uniquement de référence partagée.
     Rien n'est appliqué sur <body> depuis ce fichier. */
}

/* ---------- BASE ---------- */
@layer base {
  /* Intentionnellement vide en Phase 1.
     Les règles globales (body font, reset box-sizing, etc.)
     restent dans chaque page pour éviter toute régression.
     À migrer progressivement en Phase 2+. */

  /* iOS anti-zoom — Safari & WKWebView zooment automatiquement au focus
     sur tout input dont le font-size effectif est <16px. On force 16px min
     uniquement sur viewport mobile OU mode natif Capacitor (html.tcf-native).
     Cibles exclues : checkbox/radio/file/range (pas de focus textuel),
     readonly/disabled (pas de focus → pas de zoom).
     Niveau 1 (priorité @layer base) : peut être surchargé par les <style>
     inline non-layered des pages → niveau 2 par page si nécessaire. */
  @media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([readonly]):not([disabled]),
    textarea:not([readonly]):not([disabled]),
    select:not([disabled]) {
      font-size: max(16px, 1em);
    }
  }
  html.tcf-native input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([readonly]):not([disabled]),
  html.tcf-native textarea:not([readonly]):not([disabled]),
  html.tcf-native select:not([disabled]) {
    font-size: max(16px, 1em);
  }
}

/* ---------- COMPONENTS ---------- */
@layer components {
  /* Primitives TCF (Phase 2). Préfixées .tcf-* pour éviter toute collision
     avec les classes existantes (.card, .kpi-card, button.primary, etc.)
     Les <style> inline unlayered gagnent toujours sur ces règles :
     aucun risque de régression sur les pages déjà en place. */

  /* ====== BUTTON ====== */
  .tcf-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.65rem 1.15rem;border:1px solid transparent;border-radius:var(--tcf-radius);
    background:var(--tcf-surface);color:var(--tcf-text);
    font-family:var(--tcf-font-head);font-size:.82rem;font-weight:600;
    letter-spacing:.05em;text-transform:uppercase;line-height:1.15;
    cursor:pointer;user-select:none;white-space:nowrap;
    transition:transform .15s,box-shadow .18s,background .18s,border-color .18s,color .18s,filter .18s;
  }
  .tcf-btn:focus-visible{outline:3px solid var(--tcf-anis);outline-offset:2px}
  .tcf-btn:disabled,.tcf-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none !important}
  .tcf-btn--sm{padding:.45rem .8rem;font-size:.72rem}
  .tcf-btn--lg{padding:.85rem 1.4rem;font-size:.9rem}

  .tcf-btn--primary{
    background:linear-gradient(135deg,var(--tcf-blue),var(--tcf-blue-d));
    color:#fff;border-color:transparent;
    box-shadow:0 4px 12px rgba(13,78,127,.22);
  }
  .tcf-btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(13,78,127,.32);filter:brightness(1.05)}

  .tcf-btn--ghost{
    background:transparent;color:var(--tcf-blue);border-color:var(--tcf-border-2);
  }
  .tcf-btn--ghost:hover{background:#F4F7FB;border-color:var(--tcf-blue-l);color:var(--tcf-blue-d)}

  .tcf-btn--anis{
    background:linear-gradient(135deg,var(--tcf-anis),var(--tcf-anis-d));
    color:var(--tcf-blue-d);border-color:transparent;font-weight:700;
    box-shadow:0 4px 12px rgba(202,220,63,.4);
  }
  .tcf-btn--anis:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(202,220,63,.5);filter:brightness(1.03)}

  .tcf-btn--danger{
    background:linear-gradient(135deg,var(--tcf-red-l),var(--tcf-red));
    color:#fff;border-color:transparent;
    box-shadow:0 4px 12px rgba(220,38,38,.22);
  }
  .tcf-btn--danger:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(220,38,38,.32);filter:brightness(1.05)}

  /* ====== CARD ====== */
  .tcf-card{
    background:var(--tcf-surface);
    border:1px solid var(--tcf-border);
    border-radius:var(--tcf-radius-l);
    padding:1.25rem;
    box-shadow:var(--tcf-shadow);
  }
  .tcf-card--hoverable{transition:transform .2s,box-shadow .2s,border-color .2s}
  .tcf-card--hoverable:hover{transform:translateY(-2px);box-shadow:var(--tcf-shadow-l);border-color:var(--tcf-blue-l)}
  .tcf-card__title{font-family:var(--tcf-font-head);font-size:1rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tcf-blue);margin:0 0 .5rem}
  .tcf-card__body{color:var(--tcf-text-2);line-height:1.55}

  /* ====== KPI ====== */
  .tcf-kpi{
    position:relative;
    background:var(--tcf-surface);
    border:1px solid var(--tcf-border);
    border-top:3px solid var(--tcf-kpi-accent,var(--tcf-blue));
    border-radius:var(--tcf-radius-l);
    padding:1.25rem 1.25rem 1.1rem;
    box-shadow:var(--tcf-shadow);
    transition:transform .2s,box-shadow .2s,border-color .2s;
    overflow:hidden;
  }
  .tcf-kpi:hover{transform:translateY(-3px);box-shadow:var(--tcf-shadow-l)}
  .tcf-kpi__label{
    font-family:var(--tcf-font-head);font-size:.72rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--tcf-text-2);margin:0 0 .35rem;
  }
  .tcf-kpi__value{
    font-family:var(--tcf-font-head);font-size:2rem;font-weight:700;
    color:var(--tcf-text);line-height:1.1;margin:0;
  }
  .tcf-kpi__sub{font-size:.72rem;color:var(--tcf-text-3);margin:.35rem 0 0}
  .tcf-kpi--anis{--tcf-kpi-accent:var(--tcf-anis-d)}
  .tcf-kpi--green{--tcf-kpi-accent:var(--tcf-green)}
  .tcf-kpi--orange{--tcf-kpi-accent:var(--tcf-orange)}
  .tcf-kpi--red{--tcf-kpi-accent:var(--tcf-red)}
  .tcf-kpi--lavande{--tcf-kpi-accent:var(--tcf-lavande)}

  /* ====== BADGE ====== */
  .tcf-badge{
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.2rem .55rem;border-radius:999px;
    font-family:var(--tcf-font-body);font-size:.68rem;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;line-height:1.4;
    background:var(--tcf-card-alt);color:var(--tcf-text-2);
    border:1px solid var(--tcf-border);white-space:nowrap;
  }
  .tcf-badge--sm{font-size:.6rem;padding:.15rem .45rem}
  .tcf-badge--primary{background:rgba(13,78,127,.08);color:var(--tcf-blue);border-color:var(--tcf-blue-l)}
  .tcf-badge--anis{background:rgba(202,220,63,.18);color:var(--tcf-anis-d);border-color:var(--tcf-anis)}
  .tcf-badge--success{background:rgba(22,163,74,.1);color:var(--tcf-green);border-color:rgba(22,163,74,.3)}
  .tcf-badge--warning{background:rgba(245,158,11,.12);color:var(--tcf-orange-d);border-color:rgba(245,158,11,.35)}
  .tcf-badge--danger{background:rgba(220,38,38,.1);color:var(--tcf-red);border-color:rgba(220,38,38,.3)}
  .tcf-badge--neutral{background:#F1F5F9;color:var(--tcf-grey);border-color:var(--tcf-border)}

  /* ====== INPUT ====== */
  .tcf-input{
    display:block;width:100%;
    padding:.6rem .85rem;
    background:var(--tcf-surface);
    color:var(--tcf-text);
    border:1px solid var(--tcf-border-2);
    border-radius:var(--tcf-radius);
    font-family:var(--tcf-font-body);font-size:.9rem;line-height:1.4;
    transition:border-color .15s,box-shadow .15s,background .15s;
  }
  .tcf-input::placeholder{color:var(--tcf-text-3)}
  .tcf-input:hover:not(:disabled):not(:focus){border-color:var(--tcf-blue-l)}
  .tcf-input:focus{
    outline:none;border-color:var(--tcf-blue);
    box-shadow:0 0 0 4px var(--tcf-blue-glow);
  }
  .tcf-input:disabled{background:var(--tcf-card-alt);color:var(--tcf-text-3);cursor:not-allowed}
  .tcf-input--error{border-color:var(--tcf-red)}
  .tcf-input--error:focus{border-color:var(--tcf-red);box-shadow:0 0 0 4px rgba(220,38,38,.15)}
  .tcf-input--sm{padding:.42rem .65rem;font-size:.8rem}
  .tcf-input--lg{padding:.8rem 1rem;font-size:1rem}

  textarea.tcf-input{resize:vertical;min-height:5rem;line-height:1.5}
  select.tcf-input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tcf-text-2) 50%),linear-gradient(135deg,var(--tcf-text-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2rem}

  .tcf-label{
    display:block;
    font-family:var(--tcf-font-head);font-size:.72rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--tcf-text-2);
    margin:0 0 .35rem;
  }

  /* ====================================================================
     PH3 — modal, alert, table, progress, avatar (2026-04-30)
     Primitives purement CSS — la gestion JS (open/close, scroll lock,
     ESC, focus trap) est à la charge du caller. Naming BEM strict.
     ==================================================================== */

  /* ====== MODAL ====== */
  .tcf-modal{
    position:fixed;inset:0;z-index:9999;
    display:none;align-items:center;justify-content:center;
    padding:24px;
  }
  .tcf-modal.is-open,
  .tcf-modal[data-open="true"],
  .tcf-modal--open{display:flex}
  .tcf-modal__overlay{
    position:absolute;inset:0;
    background:rgba(10,30,60,.55);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    animation:tcf-modal-fade .15s ease-out;
  }
  .tcf-modal__dialog{
    position:relative;z-index:1;
    background:var(--tcf-surface);
    border:1px solid var(--tcf-border);
    border-radius:var(--tcf-radius-l);
    box-shadow:var(--tcf-shadow-l);
    width:100%;max-width:640px;
    max-height:calc(100vh - 48px);
    display:flex;flex-direction:column;
    overflow:hidden;
    animation:tcf-modal-in .2s cubic-bezier(.2,.8,.25,1);
  }
  .tcf-modal--sm .tcf-modal__dialog{max-width:420px}
  .tcf-modal--lg .tcf-modal__dialog{max-width:880px}
  .tcf-modal--xl .tcf-modal__dialog{max-width:1120px}
  .tcf-modal__header{
    flex:0 0 auto;
    display:flex;align-items:center;gap:.75rem;
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--tcf-border);
    background:linear-gradient(180deg,var(--tcf-surface),var(--tcf-card-alt));
  }
  .tcf-modal__title{
    flex:1;min-width:0;
    margin:0;
    font-family:var(--tcf-font-head);font-size:1.05rem;font-weight:600;
    letter-spacing:.04em;text-transform:uppercase;color:var(--tcf-blue);
    line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .tcf-modal__close{
    flex:0 0 auto;
    width:32px;height:32px;
    background:transparent;border:1px solid transparent;border-radius:8px;
    color:var(--tcf-text-2);font-size:1.1rem;line-height:1;
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s,border-color .15s;
  }
  .tcf-modal__close:hover{background:var(--tcf-card-alt);color:var(--tcf-red);border-color:var(--tcf-border)}
  .tcf-modal__close:focus-visible{outline:3px solid var(--tcf-anis);outline-offset:2px}
  .tcf-modal__body{
    flex:1 1 auto;overflow-y:auto;
    padding:1.25rem;
    color:var(--tcf-text);line-height:1.55;
  }
  .tcf-modal__footer{
    flex:0 0 auto;
    display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
    padding:.85rem 1.25rem;
    border-top:1px solid var(--tcf-border);
    background:var(--tcf-card-alt);
  }
  @keyframes tcf-modal-fade{from{opacity:0}to{opacity:1}}
  @keyframes tcf-modal-in{from{opacity:0;transform:scale(.96) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
  @media (max-width:640px){
    .tcf-modal{padding:0}
    .tcf-modal__dialog,.tcf-modal--sm .tcf-modal__dialog{
      max-width:100%;max-height:100vh;height:100vh;
      border-radius:0;border:0;
    }
  }
  @media (prefers-reduced-motion:reduce){
    .tcf-modal__overlay,.tcf-modal__dialog{animation:none}
  }
  @media (prefers-color-scheme:dark){
    .tcf-modal__dialog{background:#1f2937;border-color:#374151;color:#e5e7eb}
    .tcf-modal__header{background:linear-gradient(180deg,#1f2937,#111827);border-bottom-color:#374151}
    .tcf-modal__title{color:#A4C3DC}
    .tcf-modal__body{color:#e5e7eb}
    .tcf-modal__footer{background:#111827;border-top-color:#374151}
    .tcf-modal__close{color:#94a3b8}
    .tcf-modal__close:hover{background:#374151;color:#fca5a5}
  }

  /* ====== ALERT ====== */
  .tcf-alert{
    display:flex;align-items:flex-start;gap:.75rem;
    padding:.75rem .9rem;
    border:1px solid var(--tcf-border);
    border-left:4px solid var(--tcf-blue);
    border-radius:var(--tcf-radius);
    background:rgba(13,78,127,.06);
    color:var(--tcf-text);
    font-size:.88rem;line-height:1.5;
  }
  .tcf-alert__icon{
    flex:0 0 auto;
    font-size:1.15rem;line-height:1.2;
    color:var(--tcf-blue);
  }
  .tcf-alert__content{flex:1;min-width:0}
  .tcf-alert__title{
    font-family:var(--tcf-font-head);font-weight:600;
    letter-spacing:.03em;text-transform:uppercase;
    font-size:.8rem;color:var(--tcf-blue);
    margin:0 0 .15rem;
  }
  .tcf-alert__msg{margin:0;color:var(--tcf-text)}
  .tcf-alert__close{
    flex:0 0 auto;
    background:transparent;border:0;padding:2px 6px;border-radius:6px;
    color:var(--tcf-text-2);font-size:.95rem;line-height:1;cursor:pointer;
    transition:background .15s,color .15s;
  }
  .tcf-alert__close:hover{background:rgba(0,0,0,.06);color:var(--tcf-text)}
  .tcf-alert__close:focus-visible{outline:3px solid var(--tcf-anis);outline-offset:2px}
  /* Variants */
  .tcf-alert--info{border-left-color:var(--tcf-blue);background:rgba(13,78,127,.06)}
  .tcf-alert--info .tcf-alert__icon,.tcf-alert--info .tcf-alert__title{color:var(--tcf-blue)}
  .tcf-alert--success{border-left-color:var(--tcf-green);background:rgba(22,163,74,.08)}
  .tcf-alert--success .tcf-alert__icon,.tcf-alert--success .tcf-alert__title{color:var(--tcf-green)}
  .tcf-alert--warning{border-left-color:var(--tcf-anis-d);background:rgba(202,220,63,.16)}
  .tcf-alert--warning .tcf-alert__icon,.tcf-alert--warning .tcf-alert__title{color:var(--tcf-anis-d)}
  .tcf-alert--danger{border-left-color:var(--tcf-red);background:rgba(220,38,38,.08)}
  .tcf-alert--danger .tcf-alert__icon,.tcf-alert--danger .tcf-alert__title{color:var(--tcf-red)}
  @media (prefers-color-scheme:dark){
    .tcf-alert{background:rgba(255,255,255,.04);border-color:#374151;color:#e5e7eb}
    .tcf-alert__msg{color:#e5e7eb}
    .tcf-alert--info{background:rgba(96,165,250,.10)}
    .tcf-alert--success{background:rgba(34,197,94,.12)}
    .tcf-alert--warning{background:rgba(202,220,63,.10)}
    .tcf-alert--danger{background:rgba(248,113,113,.12)}
  }

  /* ====== TABLE ====== */
  .tcf-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--tcf-border);
    border-radius:var(--tcf-radius);
    background:var(--tcf-surface);
  }
  .tcf-table{
    width:100%;border-collapse:collapse;
    font-family:var(--tcf-font-body);font-size:.87rem;
    color:var(--tcf-text);
  }
  .tcf-table thead th{
    position:sticky;top:0;z-index:1;
    background:var(--tcf-card-alt);
    color:var(--tcf-blue);
    font-family:var(--tcf-font-head);font-size:.72rem;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    text-align:left;
    padding:10px;
    border-bottom:2px solid var(--tcf-border);
    white-space:nowrap;
  }
  .tcf-table tbody td{
    padding:8px 10px;
    border-bottom:1px solid var(--tcf-border);
    vertical-align:middle;
  }
  .tcf-table tbody tr:last-child td{border-bottom:0}
  .tcf-table tbody tr:hover{background:rgba(13,78,127,.04)}
  .tcf-table tbody tr:focus-within{background:rgba(202,220,63,.08)}
  .tcf-table--striped tbody tr:nth-child(even){background:var(--tcf-card-alt)}
  .tcf-table--striped tbody tr:nth-child(even):hover{background:rgba(13,78,127,.06)}
  .tcf-table--compact thead th{padding:6px 8px;font-size:.68rem}
  .tcf-table--compact tbody td{padding:5px 8px;font-size:.82rem}
  .tcf-table--bordered th,.tcf-table--bordered td{border:1px solid var(--tcf-border)}
  .tcf-table .num,.tcf-table [data-align="right"]{text-align:right;font-variant-numeric:tabular-nums}
  .tcf-table [data-align="center"]{text-align:center}
  @media (prefers-color-scheme:dark){
    .tcf-table-wrap{background:#1f2937;border-color:#374151}
    .tcf-table{color:#e5e7eb}
    .tcf-table thead th{background:#111827;color:#A4C3DC;border-bottom-color:#374151}
    .tcf-table tbody td{border-bottom-color:#374151}
    .tcf-table tbody tr:hover{background:rgba(255,255,255,.04)}
    .tcf-table--striped tbody tr:nth-child(even){background:rgba(255,255,255,.03)}
  }

  /* ====== PROGRESS ====== */
  .tcf-progress{
    position:relative;
    width:100%;height:8px;
    background:rgba(13,78,127,.10);
    border-radius:999px;
    overflow:hidden;
  }
  .tcf-progress--sm{height:4px}
  .tcf-progress--lg{height:12px}
  .tcf-progress__bar{
    display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--tcf-anis-d),var(--tcf-anis));
    border-radius:inherit;
    transition:width .35s cubic-bezier(.2,.8,.25,1);
  }
  .tcf-progress--success .tcf-progress__bar{background:linear-gradient(90deg,var(--tcf-green),var(--tcf-green-l))}
  .tcf-progress--warning .tcf-progress__bar{background:linear-gradient(90deg,var(--tcf-orange-d),var(--tcf-orange))}
  .tcf-progress--danger  .tcf-progress__bar{background:linear-gradient(90deg,var(--tcf-red),var(--tcf-red-l))}
  .tcf-progress--primary .tcf-progress__bar{background:linear-gradient(90deg,var(--tcf-blue-d),var(--tcf-blue))}
  /* Indéterminée : shimmer continu (réutilise le keyframe Ph2) */
  .tcf-progress--indet .tcf-progress__bar{
    width:40% !important;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--tcf-anis) 50%,
      transparent 100%);
    background-size:200% 100%;
    animation:tcf-progress-indet 1.4s linear infinite;
    transition:none;
  }
  @keyframes tcf-progress-indet{
    0%   {transform:translateX(-100%)}
    100% {transform:translateX(350%)}
  }
  @media (prefers-reduced-motion:reduce){
    .tcf-progress__bar{transition:none}
    .tcf-progress--indet .tcf-progress__bar{animation:none}
  }
  @media (prefers-color-scheme:dark){
    .tcf-progress{background:rgba(255,255,255,.08)}
  }

  /* ====== AVATAR ====== */
  .tcf-avatar{
    position:relative;
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    border-radius:50%;
    background:var(--tcf-blue);
    color:#fff;
    font-family:var(--tcf-font-head);font-weight:600;
    text-transform:uppercase;letter-spacing:.02em;
    font-size:.85rem;line-height:1;
    overflow:visible;
    background-size:cover;background-position:center;background-repeat:no-repeat;
    user-select:none;flex:0 0 auto;
    box-shadow:0 1px 2px rgba(13,78,127,.15);
  }
  .tcf-avatar__initials{
    display:inline-block;
    pointer-events:none;
  }
  /* Tailles */
  .tcf-avatar--xs{width:20px;height:20px;font-size:.55rem}
  .tcf-avatar--sm{width:28px;height:28px;font-size:.7rem}
  .tcf-avatar--md{width:36px;height:36px;font-size:.85rem}
  .tcf-avatar--lg{width:48px;height:48px;font-size:1.05rem}
  .tcf-avatar--xl{width:64px;height:64px;font-size:1.4rem}
  /* Couleurs (caller pose une classe selon le hash du nom côté JS) */
  .tcf-avatar--blue   {background:var(--tcf-blue)}
  .tcf-avatar--anis   {background:var(--tcf-anis-d);color:var(--tcf-blue-d)}
  .tcf-avatar--lavande{background:var(--tcf-lavande)}
  .tcf-avatar--rose   {background:#E879A4}
  .tcf-avatar--violet {background:#8B5CF6}
  .tcf-avatar--green  {background:var(--tcf-green)}
  .tcf-avatar--orange {background:var(--tcf-orange)}
  .tcf-avatar--grey   {background:var(--tcf-grey)}
  /* Status dot via [data-status] */
  .tcf-avatar[data-status]::after{
    content:"";
    position:absolute;
    right:-1px;bottom:-1px;
    width:25%;height:25%;min-width:8px;min-height:8px;
    border-radius:50%;
    border:2px solid var(--tcf-surface);
    background:var(--tcf-grey);
    box-sizing:content-box;
  }
  .tcf-avatar--xs[data-status]::after{border-width:1.5px}
  .tcf-avatar[data-status="online"]::after {background:var(--tcf-green)}
  .tcf-avatar[data-status="away"]::after   {background:var(--tcf-anis-d)}
  .tcf-avatar[data-status="busy"]::after   {background:var(--tcf-red)}
  .tcf-avatar[data-status="offline"]::after{background:var(--tcf-grey)}
  /* Empilement (équipe) */
  .tcf-avatar-stack{display:inline-flex;align-items:center}
  .tcf-avatar-stack > .tcf-avatar{
    border:2px solid var(--tcf-surface);
    margin-left:-10px;
  }
  .tcf-avatar-stack > .tcf-avatar:first-child{margin-left:0}
  @media (prefers-color-scheme:dark){
    .tcf-avatar[data-status]::after{border-color:#1f2937}
    .tcf-avatar-stack > .tcf-avatar{border-color:#1f2937}
  }

  /* ===== WIZARD (Phase 2 sprint design unifié, 2026-04-30) =====
     Factorise les 4 systèmes existants : .wz- (client.html),
     .ivwz- + .poctWz- (interventions.html), .oppwz- (crm.html).
     BEM pur, mobile-first. Préfixe .tcf-wz- (court, lisible). */

  .tcf-wz{font-family:var(--tcf-font-body);color:var(--tcf-text)}

  /* Barre de progression */
  .tcf-wz__progress{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;max-width:560px;margin:0 auto 28px;
  }
  .tcf-wz__step{
    display:flex;flex-direction:column;align-items:center;
    gap:6px;flex:0 0 auto;position:relative;z-index:1;
  }
  .tcf-wz__step-dot{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--tcf-card);border:2px solid var(--tcf-border);
    color:var(--tcf-text-3);font-weight:700;font-size:14px;
    transition:all .25s ease;
  }
  .tcf-wz__step--current .tcf-wz__step-dot{
    background:var(--tcf-blue);border-color:var(--tcf-blue);color:#fff;
    box-shadow:0 0 0 4px rgba(13,78,127,.12);
  }
  .tcf-wz__step--done .tcf-wz__step-dot{
    background:var(--tcf-anis);border-color:var(--tcf-anis-d);color:var(--tcf-text);
  }
  .tcf-wz__step-label{
    font-size:11px;font-weight:600;color:var(--tcf-text-3);
    text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  }
  .tcf-wz__step--current .tcf-wz__step-label{color:var(--tcf-blue)}
  .tcf-wz__bar{
    flex:1;height:2px;background:var(--tcf-border);
    margin-top:18px;transition:all .25s ease;
  }
  .tcf-wz__bar--done{background:var(--tcf-anis)}

  /* Panneau d'étape (animation fade) */
  .tcf-wz__panel{animation:tcfWzFade .3s ease}
  @keyframes tcfWzFade{
    from{opacity:0;transform:translateY(6px)}
    to  {opacity:1;transform:translateY(0)}
  }

  /* Grille de cards (catégories / sources / priorités) */
  .tcf-wz__cards{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:14px;margin-top:18px;
  }
  .tcf-wz__card{
    padding:18px 14px;border:2px solid var(--tcf-border);
    border-radius:12px;cursor:pointer;background:var(--tcf-card);
    text-align:center;transition:all .15s ease;
  }
  .tcf-wz__card:hover{
    border-color:var(--tcf-blue);
    transform:translateY(-2px);
    box-shadow:var(--tcf-shadow);
  }
  .tcf-wz__card.is-selected{
    border-color:var(--tcf-blue);background:rgba(13,78,127,.04);
  }
  .tcf-wz__card-icon{font-size:32px;margin-bottom:10px}
  .tcf-wz__card-title{font-weight:700;font-size:14px;color:var(--tcf-text);margin-bottom:4px}
  .tcf-wz__card-sub{font-size:11.5px;color:var(--tcf-text-3);line-height:1.4}

  /* Récap (étape finale) */
  .tcf-wz__recap{
    background:linear-gradient(135deg,#FAFBFD,#F4F7FB);
    border:1px solid var(--tcf-border);
    border-radius:12px;padding:18px;margin-bottom:18px;
  }
  .tcf-wz__recap-row{display:flex;gap:12px;padding:8px 0;font-size:13px}
  .tcf-wz__recap-row + .tcf-wz__recap-row{border-top:1px solid var(--tcf-border)}
  .tcf-wz__recap-k{
    color:var(--tcf-text-3);font-weight:600;min-width:110px;
    text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding-top:2px;
  }
  .tcf-wz__recap-v{color:var(--tcf-text);font-weight:500;flex:1;word-break:break-word}

  /* Actions footer */
  .tcf-wz__actions{display:flex;gap:12px;margin-top:24px;align-items:center}
  .tcf-wz__actions--end{justify-content:flex-end}

  /* Modifier sm (modale dense) */
  .tcf-wz--sm .tcf-wz__progress{margin-bottom:18px}
  .tcf-wz--sm .tcf-wz__step-dot{width:32px;height:32px;font-size:13px}

  /* Responsive */
  @media (max-width:640px){
    .tcf-wz__progress{gap:4px;margin-bottom:18px}
    .tcf-wz__step-dot{width:32px;height:32px;font-size:13px}
    .tcf-wz__step-label{display:none}
    .tcf-wz__bar{margin-top:16px}
    .tcf-wz__cards{grid-template-columns:1fr 1fr;gap:10px}
    .tcf-wz__card{padding:16px 10px;min-height:44px}
    .tcf-wz__card-icon{font-size:26px}
    .tcf-wz__recap-k{min-width:90px}
    .tcf-wz__actions{flex-wrap:wrap;gap:10px}
    .tcf-wz__actions > *{min-height:44px}
  }

  /* ===== DRAWER (Phase 2, 2026-04-30) =====
     Primitive pour app-switcher / panneau latéral.
     Le drawer global tcf-drawer.js conserve son préfixe .tcfgd- pour
     compat ; ces classes sont disponibles pour drawer locaux/internes. */
  .tcf-drawer{position:fixed;inset:0;z-index:9999;pointer-events:none}
  .tcf-drawer.is-open{pointer-events:auto}
  .tcf-drawer__overlay{
    position:absolute;inset:0;background:rgba(13,27,42,.45);
    opacity:0;transition:opacity .25s ease;
  }
  .tcf-drawer.is-open .tcf-drawer__overlay{opacity:1}
  .tcf-drawer__aside{
    position:absolute;top:0;bottom:0;right:0;
    width:min(360px,90vw);background:var(--tcf-surface);
    box-shadow:var(--tcf-shadow-l);
    transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
    display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top,0);
  }
  .tcf-drawer--left .tcf-drawer__aside{right:auto;left:0;transform:translateX(-100%)}
  .tcf-drawer.is-open .tcf-drawer__aside{transform:translateX(0)}
  .tcf-drawer__header{
    padding:16px;border-bottom:1px solid var(--tcf-border);
    display:flex;align-items:center;gap:12px;
  }
  .tcf-drawer__title{
    font-family:var(--tcf-font-head);font-weight:600;font-size:15px;
    text-transform:uppercase;letter-spacing:.02em;flex:1;
  }
  .tcf-drawer__close{
    background:transparent;border:none;cursor:pointer;
    width:36px;height:36px;border-radius:8px;color:var(--tcf-text-2);
    display:flex;align-items:center;justify-content:center;
  }
  .tcf-drawer__close:hover{background:var(--tcf-card-alt);color:var(--tcf-text)}
  .tcf-drawer__body{flex:1;overflow-y:auto;padding:8px 0}
  .tcf-drawer__footer{
    padding:12px 16px;border-top:1px solid var(--tcf-border);
    background:var(--tcf-card-alt);
  }
  .tcf-drawer__item{
    display:flex;align-items:center;gap:12px;
    padding:10px 16px;color:var(--tcf-text);text-decoration:none;
    cursor:pointer;border:none;background:transparent;width:100%;
    font:inherit;text-align:left;
  }
  .tcf-drawer__item:hover{background:var(--tcf-card-alt)}
  .tcf-drawer__item.is-active{background:rgba(13,78,127,.06);color:var(--tcf-blue);font-weight:600}
}

/* ---------- COPILOT WIDGET (Hugo interne) ----------
   NON-LAYERED volontairement : les <style> inline des pages
   sont unlayered et incluent des resets globaux (* { padding:0 })
   qui écraseraient notre widget s'il était dans @layer components.
   En restant unlayered, la spécificité de classe (0,1,0) gagne
   sur les sélecteurs universels (0,0,0) des resets. */
.tcf-cop-panel, .tcf-cop-panel *, .tcf-cop-fab{
  box-sizing:border-box;
}
.tcf-cop-fab{
  position:fixed!important;right:20px!important;bottom:20px!important;
  top:auto!important;left:auto!important;
  width:56px;height:56px;border-radius:50%;
  background:var(--tcf-blue,#0D4E7F);color:#fff;border:none;cursor:pointer;z-index:9998;
  box-shadow:0 4px 14px rgba(13,78,127,.35);display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;padding:0;margin:0;transition:transform .2s,box-shadow .2s;
}
.tcf-cop-fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(13,78,127,.45);}
.tcf-cop-fab.is-open{background:var(--tcf-anis,#CADC3F);color:var(--tcf-blue,#0D4E7F);}
.tcf-cop-panel{
  position:fixed;right:20px;bottom:88px;width:420px;max-width:calc(100vw - 24px);
  height:600px;max-height:calc(100vh - 120px);
  background:var(--tcf-surface,#FFFFFF);border-radius:16px;box-shadow:0 12px 40px rgba(10,30,60,.25);
  display:none;flex-direction:column;z-index:9997;overflow:hidden;
  font-family:var(--tcf-font-body,'Montserrat',sans-serif);color:var(--tcf-text,#0A1F38);
}
.tcf-cop-panel.is-open{display:flex;}
.tcf-cop-head{
  background:linear-gradient(135deg,var(--tcf-blue,#0D4E7F),var(--tcf-blue-d,#0A3D63));color:#fff;
  padding:14px 16px;display:flex;align-items:center;gap:10px;flex:0 0 auto;
}
.tcf-cop-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--tcf-anis,#CADC3F);color:var(--tcf-blue,#0D4E7F);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;
}
.tcf-cop-title{flex:1;min-width:0;}
.tcf-cop-title b{font-family:var(--tcf-font-head,'Oswald',sans-serif);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;display:block;font-weight:600;}
.tcf-cop-title small{font-size:.72rem;opacity:.82;display:block;}
.tcf-cop-x{
  background:transparent;border:none;color:#fff;font-size:20px;line-height:1;cursor:pointer;
  opacity:.8;padding:6px 10px;margin:0;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center;
}
.tcf-cop-x:hover{opacity:1;}
.tcf-cop-body{flex:1 1 auto;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--tcf-bg,#F4F6FA);min-height:0;}
.tcf-cop-msg{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;word-wrap:break-word;white-space:pre-wrap;margin:0;}
.tcf-cop-msg--u{align-self:flex-end;background:var(--tcf-blue,#0D4E7F);color:#fff;border-bottom-right-radius:4px;}
.tcf-cop-msg--a{align-self:flex-start;background:#fff;color:var(--tcf-text,#0A1F38);border:1px solid var(--tcf-grey-l,#D3D6D6);border-bottom-left-radius:4px;}
.tcf-cop-nav{align-self:flex-start;margin:-4px 0 0;}
.tcf-cop-nav a{
  display:inline-block;padding:8px 14px;background:var(--tcf-anis,#CADC3F);color:var(--tcf-blue,#0D4E7F);
  border-radius:8px;text-decoration:none;font-weight:600;font-size:.85rem;
}
.tcf-cop-nav a:hover{background:var(--tcf-anis-d,#A8BC2A);}
.tcf-cop-typing{align-self:flex-start;padding:10px 14px;background:#fff;border:1px solid var(--tcf-grey-l,#D3D6D6);border-radius:14px;display:flex;gap:4px;}
.tcf-cop-typing span{width:6px;height:6px;background:var(--tcf-grey,#636464);border-radius:50%;animation:tcfCopBlink 1.2s infinite;}
.tcf-cop-typing span:nth-child(2){animation-delay:.2s;}
.tcf-cop-typing span:nth-child(3){animation-delay:.4s;}
@keyframes tcfCopBlink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}
.tcf-cop-foot{
  padding:10px 12px;border-top:1px solid var(--tcf-grey-l,#D3D6D6);
  display:flex;gap:8px;background:#fff;flex:0 0 auto;align-items:stretch;margin:0;
}
.tcf-cop-input{
  flex:1 1 auto;min-width:0;width:100%;
  padding:10px 12px;border:1px solid var(--tcf-grey-l,#D3D6D6);border-radius:10px;
  font-family:inherit;font-size:.9rem;line-height:1.2;
  background:#fff;color:var(--tcf-text,#0A1F38);
  outline:none;margin:0;transition:border-color .15s;height:auto;
}
.tcf-cop-input:focus{border-color:var(--tcf-blue,#0D4E7F);}
.tcf-cop-send{
  flex:0 0 auto;padding:10px 18px;background:var(--tcf-blue,#0D4E7F);color:#fff;
  border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:1rem;line-height:1;
  margin:0;min-width:48px;min-height:40px;
  display:flex;align-items:center;justify-content:center;
}
.tcf-cop-send:disabled{opacity:.5;cursor:not-allowed;}
.tcf-cop-welcome{text-align:center;padding:24px 16px;color:var(--tcf-text-2,#546273);}
.tcf-cop-welcome h4{font-family:var(--tcf-font-head,'Oswald',sans-serif);text-transform:uppercase;color:var(--tcf-blue,#0D4E7F);margin:8px 0 6px;font-size:1rem;font-weight:600;}
.tcf-cop-welcome p{font-size:.85rem;margin:0 0 12px;}
.tcf-cop-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.tcf-cop-chip{
  padding:6px 10px;background:#fff;border:1px solid var(--tcf-grey-l,#D3D6D6);border-radius:16px;
  font-size:.78rem;cursor:pointer;color:var(--tcf-blue,#0D4E7F);font-family:inherit;margin:0;
}
.tcf-cop-chip:hover{background:var(--tcf-anis-l,#D9E9BA);border-color:var(--tcf-anis,#CADC3F);}

/* Markdown léger dans les réponses assistant */
.tcf-cop-msg--a{white-space:normal;}
.tcf-cop-msg--a strong{color:var(--tcf-blue,#0D4E7F);font-weight:600;}
.tcf-cop-msg--a .tcf-cop-ul{margin:4px 0 4px 0;padding-left:18px;list-style:disc;}
.tcf-cop-msg--a .tcf-cop-ul li{margin:2px 0;}
.tcf-cop-msg--a .tcf-cop-br{height:6px;}
.tcf-cop-msg--a .tcf-cop-code{background:#EEF2F7;padding:1px 5px;border-radius:4px;font-family:'Courier New',monospace;font-size:.82rem;color:var(--tcf-blue,#0D4E7F);}

@media (max-width:640px){
  .tcf-cop-panel{right:8px;left:8px;bottom:80px;width:auto;max-width:none;height:min(78vh,560px);}
  .tcf-cop-fab{right:14px!important;bottom:14px!important;}
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  /* Hover quick actions sur lignes de tables (Sprint Ergo D1).
     Usage : <tr class="tcf-row"><td>…</td><td class="tcf-row-actions">
              <button class="tcf-row-action" title="Éditer">✏️</button>
              <button class="tcf-row-action" data-danger title="Supprimer">🗑</button>
            </td></tr>
     Les actions sont opacity:0 par défaut, visibles au hover de la ligne
     OU au focus clavier. Compatible avec UL/LI ou DIV.row.
  */
  .tcf-row-actions {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    opacity: 0;
    transition: opacity .12s ease-out;
    white-space: nowrap;
  }
  .tcf-row:hover .tcf-row-actions,
  tr:hover > .tcf-row-actions,
  .tcf-row-actions:focus-within {
    opacity: 1;
  }
  .tcf-row-action {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    color: inherit;
    transition: background .12s, transform .08s;
  }
  .tcf-row-action:hover {
    background: rgba(13, 78, 127, .08);
  }
  .tcf-row-action:active {
    transform: scale(.92);
  }
  .tcf-row-action[data-danger]:hover {
    background: rgba(220, 38, 38, .10);
  }
  /* Mobile : actions toujours visibles (pas de hover) */
  @media (hover: none) {
    .tcf-row-actions { opacity: 1; }
  }

  /* ────────────────────────────────────────────────────────────────
     Skeletons shimmer (Sprint Ergo D3, 2026-04-30)
     Usage : <div class="tcf-skel tcf-skel--row"></div>
             <div class="tcf-skel tcf-skel--title"></div>
             <div class="tcf-skel tcf-skel--card"></div>
             <div class="tcf-skel tcf-skel--kpi"></div>
             <div class="tcf-skel tcf-skel--text"></div>
     ──────────────────────────────────────────────────────────────── */
  .tcf-skel {
    background: linear-gradient(90deg, #eef2f6 25%, #f7f9fb 50%, #eef2f6 75%);
    background-size: 200% 100%;
    animation: tcf-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
  }
  @keyframes tcf-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .tcf-skel--text  { height: 12px; margin: 6px 0; }
  .tcf-skel--title { height: 18px; width: 60%; margin-bottom: 8px; }
  .tcf-skel--row   { height: 36px; margin: 4px 0; }
  .tcf-skel--card  { height: 88px; margin: 8px 0; }
  .tcf-skel--kpi   { height: 64px; width: 100%; }
  .tcf-skel--circle{ border-radius: 50%; width: 40px; height: 40px; }

  /* Wrappers prêts à l'emploi */
  .tcf-skel-list  { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
  .tcf-skel-grid  { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .tcf-skel-kanban{ display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .tcf-skel-col   { background: rgba(13,78,127,.04); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

  @media (prefers-color-scheme: dark) {
    .tcf-skel {
      background: linear-gradient(90deg, #1f2937 25%, #2a3442 50%, #1f2937 75%);
      background-size: 200% 100%;
    }
    .tcf-skel-col { background: rgba(255,255,255,.04); }
  }

  /* ────────────────────────────────────────────────────────────────
     Empty states (Sprint Ergo D3, 2026-04-30)
     Usage :
       <div class="tcf-empty">
         <div class="tcf-empty__icon">📭</div>
         <div class="tcf-empty__title">Aucune intervention</div>
         <div class="tcf-empty__sub">Créez votre première OT pour démarrer.</div>
         <button class="tcf-btn tcf-btn--primary">+ Créer une OT</button>
       </div>
     ──────────────────────────────────────────────────────────────── */
  .tcf-empty {
    text-align: center;
    padding: 36px 24px;
    color: #6b7280;
    font-size: 14px;
  }
  .tcf-empty__icon  { font-size: 36px; opacity: .35; margin-bottom: 8px; line-height: 1; }
  .tcf-empty__title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #0d4e7f;
    margin-bottom: 4px;
  }
  .tcf-empty__sub { margin-bottom: 14px; opacity: .85; }
  @media (prefers-color-scheme: dark) {
    .tcf-empty       { color: #94a3b8; }
    .tcf-empty__title{ color: #A4C3DC; }
  }
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE TABLETTE (Sprint Ergo D5, 2026-04-30)
   Cible : 768-1024px (iPad paysage, tablettes Android)
   Aurore ADV + superadmin utilisent iPad en déplacement.
   On ne refond pas le mobile (<768px) — déjà géré par terrain.html
   et le mode tech Praxedo. Ici on rend juste l'admin lisible/tactile.
   Hors @layer pour gagner sur les <style> inline des pages.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Tactile mini 36px — recommandation Apple HIG (44px idéal) */
  .tcf-btn { min-height: 36px; }
  button.primary, button.secondary, button.danger,
  button.btn-primary, button.btn-secondary { min-height: 36px; }

  /* Cards : padding réduit pour gagner de la place */
  .tcf-card { padding: 0.95rem 1rem; }
  .iv-section-card,
  .tk-sidebar-card,
  .kpi-card { padding: 14px 16px !important; }

  /* KPI grids : 2 colonnes max sur tablette */
  .kpi-grid,
  .tcf-kpi-grid,
  .dashboard-kpis,
  .iv-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* Tables : cellules plus compactes */
  table.tcf-table th,
  table.tcf-table td,
  .iv-table th, .iv-table td,
  .tk-table th, .tk-table td {
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
  table.tcf-table { font-size: 13px; }

  /* Modales : full width avec marges */
  .modal,
  .modal-content,
  .tcf-modal,
  [role="dialog"] {
    max-width: calc(100vw - 32px) !important;
  }

  /* Inputs : taille tactile mini */
  .tcf-input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="date"], input[type="datetime-local"], input[type="time"],
  select, textarea {
    min-height: 36px;
    font-size: 14px;
  }

  /* Onglets/tabs : scroll horizontal si overflow */
  .tcf-tabs,
  .iv-tabs,
  .tk-tabs,
  [role="tablist"] {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .tcf-tabs > *,
  .iv-tabs > *,
  .tk-tabs > * { scroll-snap-align: start; flex-shrink: 0; }

  /* Hide scrollbar visuel (mais garder la fonction) */
  .tcf-tabs::-webkit-scrollbar,
  .iv-tabs::-webkit-scrollbar,
  .tk-tabs::-webkit-scrollbar { height: 4px; }

  /* Hover quick-actions : toujours visibles sur tactile */
  .tcf-row-actions { opacity: 1 !important; }
}

/* ---------- LEGACY ---------- */
@layer legacy {
  /* Alias DS pour classes génériques utilisées partout dans
     le legacy. Chargées dans @layer legacy → priorité la plus
     basse, n'écrasent JAMAIS les <style> inline unlayered.
     Effet : 668 boutons .btn héritent visuellement des tokens
     TCF en 1 commit, zéro modif HTML. (Audit DS 2026-04-30) */

  /* === Boutons génériques === */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px;
    font-family: var(--tcf-font-body); font-weight: 600; font-size: 13.5px;
    line-height: 1.2; cursor: pointer;
    border: 1px solid transparent;
    background: var(--tcf-card-alt); color: var(--tcf-text);
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
  }
  .btn:hover { background: var(--tcf-border); }
  .btn:active { transform: translateY(1px); }
  .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

  .btn-primary, .btn.primary {
    background: var(--tcf-blue); color: #fff; border-color: var(--tcf-blue);
  }
  .btn-primary:hover, .btn.primary:hover { background: var(--tcf-blue-d); }

  .btn-secondary, .btn.secondary {
    background: transparent; color: var(--tcf-blue); border-color: var(--tcf-blue);
  }
  .btn-secondary:hover, .btn.secondary:hover { background: var(--tcf-blue); color: #fff; }

  .btn-anis, .btn.anis {
    background: var(--tcf-anis); color: var(--tcf-text); border-color: var(--tcf-anis);
  }
  .btn-anis:hover, .btn.anis:hover { background: var(--tcf-anis-d); border-color: var(--tcf-anis-d); }

  .btn-danger, .btn.danger {
    background: var(--tcf-danger); color: #fff; border-color: var(--tcf-danger);
  }
  .btn-danger:hover, .btn.danger:hover { background: var(--tcf-danger-d); border-color: var(--tcf-danger-d); }

  .btn-ghost, .btn.ghost {
    background: transparent; color: var(--tcf-text-2); border-color: var(--tcf-border);
  }
  .btn-ghost:hover, .btn.ghost:hover { background: var(--tcf-card-alt); color: var(--tcf-text); }

  .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
  .btn-lg { padding: 12px 20px; font-size: 15px; border-radius: 12px; }

  /* === Cards génériques === */
  .card {
    background: var(--tcf-card);
    border: 1px solid var(--tcf-border);
    border-radius: var(--tcf-radius);
    box-shadow: var(--tcf-shadow);
  }
  .card-title {
    font-family: var(--tcf-font-head);
    font-weight: 600; font-size: 15px;
    color: var(--tcf-text);
    text-transform: uppercase; letter-spacing: .02em;
  }
  .card-header {
    padding: 14px 16px; border-bottom: 1px solid var(--tcf-border);
    display: flex; align-items: center; gap: 12px;
  }
  .card-body { padding: 16px; }
  .card-footer {
    padding: 12px 16px; border-top: 1px solid var(--tcf-border);
    background: var(--tcf-card-alt);
  }

  /* === Inputs génériques === */
  .form-control, input.form-control, textarea.form-control, select.form-control {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--tcf-border); border-radius: 8px;
    background: var(--tcf-surface); color: var(--tcf-text);
    font-family: var(--tcf-font-body); font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-control:focus {
    outline: none; border-color: var(--tcf-blue);
    box-shadow: 0 0 0 3px var(--tcf-blue-glow);
  }
  .form-label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--tcf-text-2);
    text-transform: uppercase; letter-spacing: .03em;
  }

  /* === Alerts génériques === */
  .alert {
    padding: 12px 16px; border-radius: 10px;
    border-left: 4px solid var(--tcf-info);
    background: var(--tcf-info-l); color: var(--tcf-text);
    font-size: 14px;
  }
  .alert-success { border-left-color: var(--tcf-success); background: var(--tcf-success-l); }
  .alert-warning { border-left-color: var(--tcf-warning); background: var(--tcf-warning-l); }
  .alert-danger  { border-left-color: var(--tcf-danger);  background: var(--tcf-danger-l); }
}

/* ════════════════════════════════════════════════════════════════════
   Mode App native iOS/Android (2026-05-02)
   Quand <html class="tcf-native"> (ajoutée par tcf-native-bridge.js),
   on garde les sidebars/topbars locales (menu intra-app) et on ajoute
   juste le safe-area iOS + un FAB 9 points (drawer) qui ramène vers le
   springboard /native-launcher.html pour la navigation cross-app.
   ════════════════════════════════════════════════════════════════════ */
/* Les pages mobiles dédiées (*-mobile.html) gèrent leur propre safe-area dans .app,
   donc on les exclut via body.is-mobile-app sinon double padding-top = espace blanc énorme en haut. */
html.tcf-native body:not(.is-mobile-app) {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Le FAB du drawer sert à revenir au springboard depuis n'importe
   quelle app — on le force visible même quand un trigger logo sidebar
   est détecté (`.brand`, `.sb-brand`, etc.). Sur le springboard
   lui-même, on le masque pour éviter le doublon visuel. */
html.tcf-native .tcfgd-fab.tcfgd-fab--hidden { display: flex !important; }
html.tcf-native body[data-page="native-launcher"] .tcfgd-fab { display: none !important; }

/* Ticketing : la nav .tk-sidebar est masquée ≤768px par défaut.
   En mode natif iOS, on la rétablit en off-canvas (slide-in) avec
   une hamburger injectée par tcf-native-bridge.js. */
@media (max-width: 768px) {
  html.tcf-native .tk-sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(260px, 78vw);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
    overflow-y: auto;
  }
  html.tcf-native .tk-sidebar.tk-nav-open { transform: translateX(0); }
  html.tcf-native .tk-nav-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.45); z-index: 199;
    -webkit-tap-highlight-color: transparent;
  }
  html.tcf-native .tk-nav-backdrop.on { display: block; }
  html.tcf-native .tk-nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: none;
    font-size: 22px; line-height: 1; cursor: pointer;
    color: var(--tcf-blue, #0D4E7F);
    margin-right: 4px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v3 REFRESH — propagation post-validation 2026-05-07
   ────────────────────────────────────────────────────────────────────────
   Validation visuelle Anthony sur /ui-redesign-preview.html. Stratégie :
   - On expose les tokens v3 (--ds-*) sur :root → utilisables partout.
   - On NE TOUCHE PAS aux <style> inline d'interventions.html (24278 l.,
     685 border-radius, 2814 inline). Les inline gagnent toujours.
   - On raffine les classes .tcf-* (Ph2/Ph3) ET les alias legacy .btn/.card
     dans @layer legacy → priorité minimale, zéro régression.
   Bénéfice : focus ring anis 3px global, radius unifié 8px (md) sur les
   composants DS, shadows 3 niveaux subtiles, transitions douces.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces v3 (charte TCF, neutres modernes) */
  --ds-bg:           #F7F9FC;
  --ds-surface:      #FFFFFF;
  --ds-surface-2:    #F1F4F9;
  --ds-surface-3:    #E7ECF3;

  /* Bordures v3 */
  --ds-border:       #E2E8F0;
  --ds-border-strong:#CBD5E1;

  /* Texte v3 */
  --ds-text:         #0F172A;
  --ds-text-2:       #475569;
  --ds-text-3:       #94A3B8;

  /* Brand v3 (alias des tokens TCF existants pour cohérence) */
  --ds-primary:      #0D4E7F;
  --ds-primary-d:    #0A3D63;
  --ds-primary-l:    #5985BC;
  --ds-primary-50:   #F1F6FB;
  --ds-primary-100:  #DDE8F3;
  --ds-primary-soft: rgba(13,78,127,.08);
  --ds-anis:         #CADC3F;
  --ds-anis-d:       #A8BC2A;
  --ds-anis-50:      #F8FBE9;
  --ds-anis-100:     #ECF3C2;

  /* States v3 */
  --ds-success:      #10B981;
  --ds-success-50:   #ECFDF5;
  --ds-success-100:  #D1FAE5;
  --ds-warning:      #F59E0B;
  --ds-warning-50:   #FFFBEB;
  --ds-warning-100:  #FEF3C7;
  --ds-danger:       #DC2626;
  --ds-danger-50:    #FEF2F2;
  --ds-danger-100:   #FEE2E2;
  --ds-info:         #2563EB;
  --ds-info-50:      #EFF6FF;
  --ds-info-100:     #DBEAFE;

  /* Radius v3 — échelle unique 4/6/8/10/14/18 */
  --ds-r-xs:  4px;
  --ds-r-sm:  6px;
  --ds-r-md:  8px;       /* DEFAULT v3 */
  --ds-r-lg:  10px;
  --ds-r-xl:  14px;
  --ds-r-2xl: 18px;
  --ds-r-full: 9999px;

  /* Spacing 8pt grid */
  --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
  --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px; --ds-12: 48px;

  /* Shadows v3 (3 niveaux subtiles) */
  --ds-sh-sm: 0 1px 2px rgba(15,23,42,.05);
  --ds-sh-md: 0 4px 12px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --ds-sh-lg: 0 12px 32px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.06);

  /* Focus ring anis (signature TCF) */
  --ds-sh-focus:   0 0 0 3px rgba(202,220,63,.55);
  --ds-sh-focus-d: 0 0 0 3px rgba(202,220,63,.42);

  /* Transitions */
  --ds-tr:      160ms cubic-bezier(.4,0,.2,1);
  --ds-tr-slow: 220ms cubic-bezier(.4,0,.2,1);
}

/* Dark mode auto via media query — uniquement si la page n'a pas
   son propre data-theme (charte light forcée pour les techs Praxedo) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-bg:           #0B1220;
    --ds-surface:      #111A2E;
    --ds-surface-2:    #16213A;
    --ds-surface-3:    #1E2D4A;
    --ds-border:       #233354;
    --ds-border-strong:#34487A;
    --ds-text:         #F1F5FA;
    --ds-text-2:       #B0BCD4;
    --ds-text-3:       #6B7C9C;
    --ds-sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --ds-sh-md: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3);
    --ds-sh-lg: 0 16px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35);
  }
}

/* ───────── Refresh primitives .tcf-* (Ph2/Ph3) ─────────
   Modifs ciblées : focus ring anis unifié 3px, radius v3 md (8px),
   transitions douces. Reste dans @layer components → battu uniquement
   par les <style> inline (zéro risque sur interventions.html). */
@layer components {
  .tcf-btn {
    border-radius: var(--ds-r-md);
    transition: background var(--ds-tr), color var(--ds-tr),
                border-color var(--ds-tr), box-shadow var(--ds-tr),
                transform .08s ease-out, filter var(--ds-tr);
  }
  .tcf-btn:focus-visible {
    outline: none;
    box-shadow: var(--ds-sh-focus);
    border-color: var(--ds-anis-d);
  }
  .tcf-input {
    border-radius: var(--ds-r-md);
    transition: border-color var(--ds-tr), box-shadow var(--ds-tr), background var(--ds-tr);
  }
  .tcf-input:focus {
    border-color: var(--tcf-blue);
    box-shadow: var(--ds-sh-focus);
  }
  .tcf-card {
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-sh-sm);
  }
  .tcf-card--hoverable:hover { box-shadow: var(--ds-sh-md); }
  .tcf-kpi {
    border-radius: var(--ds-r-xl);
    box-shadow: var(--ds-sh-sm);
  }
  .tcf-kpi:hover { box-shadow: var(--ds-sh-md); }
  .tcf-modal__dialog {
    border-radius: var(--ds-r-2xl);
    box-shadow: var(--ds-sh-lg);
  }
  .tcf-badge { border-radius: var(--ds-r-full); }
  .tcf-alert { border-radius: var(--ds-r-md); }
}

/* ───────── Refresh alias legacy (.btn / .card / .kpi-card / .form-control) ─────────
   @layer legacy → priorité minimale. Les pages qui ont un style inline
   gagnent toujours. Effet : sur les boutons SANS override inline,
   on récupère le rendu DS v3 (radius 8px, focus ring anis, transitions). */
@layer legacy {
  .btn,
  .btn-sm, .btn-lg {
    border-radius: var(--ds-r-md);
    transition: background var(--ds-tr), color var(--ds-tr),
                border-color var(--ds-tr), box-shadow var(--ds-tr),
                transform .08s ease-out;
  }
  .btn:focus-visible,
  .btn-primary:focus-visible, .btn.primary:focus-visible,
  .btn-secondary:focus-visible, .btn.secondary:focus-visible,
  .btn-anis:focus-visible, .btn.anis:focus-visible,
  .btn-danger:focus-visible, .btn.danger:focus-visible,
  .btn-ghost:focus-visible, .btn.ghost:focus-visible {
    outline: none;
    box-shadow: var(--ds-sh-focus);
    border-color: var(--ds-anis-d);
  }
  .btn:active:not(:disabled) { transform: translateY(1px); }

  .card { border-radius: var(--ds-r-xl); box-shadow: var(--ds-sh-sm); }
  .form-control,
  input.form-control, textarea.form-control, select.form-control {
    border-radius: var(--ds-r-md);
    transition: border-color var(--ds-tr), box-shadow var(--ds-tr);
  }
  .form-control:focus {
    border-color: var(--tcf-blue);
    box-shadow: var(--ds-sh-focus);
  }
  /* Focus ring anis sur tous inputs natifs SANS classe explicite */
  input:not([class*="ds"]):not([class*="tcf-"]):not([class*="form-control"]):focus-visible,
  textarea:not([class*="ds"]):not([class*="tcf-"]):not([class*="form-control"]):focus-visible,
  select:not([class*="ds"]):not([class*="tcf-"]):not([class*="form-control"]):focus-visible {
    outline: none;
    box-shadow: var(--ds-sh-focus);
    border-color: var(--ds-anis-d);
  }

  /* ───────── Topbar TCF unifié — ligne anis + fond gradient ─────────
     Toutes les pages prod (interventions/portail/dashboard/ticketing/crm/
     hyperviseur/stock/monportail/client) qui ont un .topbar ou .app-topbar
     ou .main-header héritent du même rendu. Couches inline (unlayered)
     gagnent si elles surchargent vraiment.
     2026-05-07 — propagation suite demande "même config visuelle partout". */
  .topbar, .app-topbar, .main-header, .tk-topbar, .crm-topbar, .sb-topbar {
    box-shadow: 0 3px 0 0 var(--tcf-anis), 0 4px 14px rgba(13, 78, 127, .06);
    background: linear-gradient(180deg, #fff, #FAFBFD);
  }
  /* Compaction du padding-top de .content (gain ~8px sous le topbar) */
  .content { padding-top: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Mode "Affichage agrandi" — accessibilité (assets/js/tcf-a11y-zoom.js)
   3 niveaux progressifs activables depuis le sheet utilisateur du springboard
   ou /monportail.html. Persistés en localStorage.tcf_a11y_zoom (0..3).
   Approche : on agit principalement sur la racine `html` pour scaler tout
   ce qui est en `rem`/`em`. Pour les éléments en `px` durs (boutons, inputs,
   chips, badges) on force des min-heights et font-sizes via sélecteurs.
   ════════════════════════════════════════════════════════════════════════════ */
@layer utilities {
  /* Niveau 1 — Confort (+12%) */
  html.tcf-a11y-zoom-1 { font-size: 112.5%; }
  html.tcf-a11y-zoom-1 body,
  html.tcf-a11y-zoom-1 input,
  html.tcf-a11y-zoom-1 select,
  html.tcf-a11y-zoom-1 textarea,
  html.tcf-a11y-zoom-1 button { line-height: 1.5; }
  html.tcf-a11y-zoom-1 button,
  html.tcf-a11y-zoom-1 .btn,
  html.tcf-a11y-zoom-1 .tcf-btn,
  html.tcf-a11y-zoom-1 input[type="text"],
  html.tcf-a11y-zoom-1 input[type="email"],
  html.tcf-a11y-zoom-1 input[type="tel"],
  html.tcf-a11y-zoom-1 input[type="search"],
  html.tcf-a11y-zoom-1 input[type="number"],
  html.tcf-a11y-zoom-1 input[type="password"],
  html.tcf-a11y-zoom-1 input[type="datetime-local"],
  html.tcf-a11y-zoom-1 input[type="date"],
  html.tcf-a11y-zoom-1 input[type="time"],
  html.tcf-a11y-zoom-1 select,
  html.tcf-a11y-zoom-1 textarea { min-height: 48px; font-size: 16px; }

  /* Niveau 2 — Large (+25%) */
  html.tcf-a11y-zoom-2 { font-size: 125%; }
  html.tcf-a11y-zoom-2 body,
  html.tcf-a11y-zoom-2 input,
  html.tcf-a11y-zoom-2 select,
  html.tcf-a11y-zoom-2 textarea,
  html.tcf-a11y-zoom-2 button { line-height: 1.55; }
  html.tcf-a11y-zoom-2 button,
  html.tcf-a11y-zoom-2 .btn,
  html.tcf-a11y-zoom-2 .tcf-btn,
  html.tcf-a11y-zoom-2 input[type="text"],
  html.tcf-a11y-zoom-2 input[type="email"],
  html.tcf-a11y-zoom-2 input[type="tel"],
  html.tcf-a11y-zoom-2 input[type="search"],
  html.tcf-a11y-zoom-2 input[type="number"],
  html.tcf-a11y-zoom-2 input[type="password"],
  html.tcf-a11y-zoom-2 input[type="datetime-local"],
  html.tcf-a11y-zoom-2 input[type="date"],
  html.tcf-a11y-zoom-2 input[type="time"],
  html.tcf-a11y-zoom-2 select,
  html.tcf-a11y-zoom-2 textarea { min-height: 52px; font-size: 17px; }

  /* Niveau 3 — XL (+40%) — pour très basse vision */
  html.tcf-a11y-zoom-3 { font-size: 140%; }
  html.tcf-a11y-zoom-3 body,
  html.tcf-a11y-zoom-3 input,
  html.tcf-a11y-zoom-3 select,
  html.tcf-a11y-zoom-3 textarea,
  html.tcf-a11y-zoom-3 button { line-height: 1.6; }
  html.tcf-a11y-zoom-3 button,
  html.tcf-a11y-zoom-3 .btn,
  html.tcf-a11y-zoom-3 .tcf-btn,
  html.tcf-a11y-zoom-3 input[type="text"],
  html.tcf-a11y-zoom-3 input[type="email"],
  html.tcf-a11y-zoom-3 input[type="tel"],
  html.tcf-a11y-zoom-3 input[type="search"],
  html.tcf-a11y-zoom-3 input[type="number"],
  html.tcf-a11y-zoom-3 input[type="password"],
  html.tcf-a11y-zoom-3 input[type="datetime-local"],
  html.tcf-a11y-zoom-3 input[type="date"],
  html.tcf-a11y-zoom-3 input[type="time"],
  html.tcf-a11y-zoom-3 select,
  html.tcf-a11y-zoom-3 textarea { min-height: 56px; font-size: 18px; }

  /* Boost commun à tous les niveaux : badges, chips, KPI compacts qui
     restent souvent en 11/12px → fatigue oculaire en mode zoom. */
  html.tcf-a11y-zoom .badge,
  html.tcf-a11y-zoom .chip,
  html.tcf-a11y-zoom .tcf-badge,
  html.tcf-a11y-zoom .tk-badge,
  html.tcf-a11y-zoom .blk__h,
  html.tcf-a11y-zoom small { font-size: 0.9em !important; }

  /* Tap targets icônes (FAB, header buttons, nav) — confort tactile */
  html.tcf-a11y-zoom .nl-tile,
  html.tcf-a11y-zoom .fab,
  html.tcf-a11y-zoom .icon-btn,
  html.tcf-a11y-zoom [role="button"] { min-height: 48px; }
}

/* ─────────────────────────────────────────────────────────────────
 * Mode sombre global (data-theme="dark") — 2026-05-10
 * Remap des variables TCF vers une palette dark navy cohérente avec
 * le springboard. Toute page incluant tcf-core.css + tcf-theme.js et
 * utilisant les variables --tcf-* hérite automatiquement du dark.
 * Les couleurs de marque (--tcf-blue, --tcf-anis) restent constantes.
 * ───────────────────────────────────────────────────────────────── */
@layer utilities {
  html[data-theme="dark"] {
    --tcf-bg:        #0A1628;
    --tcf-surface:   #0F1F38;
    --tcf-card:      #16294A;
    --tcf-card-alt:  #1A3155;
    --tcf-border:    rgba(255,255,255,.10);
    --tcf-border-2:  rgba(255,255,255,.18);
    --tcf-text:      #F1F5F9;
    --tcf-text-2:    #94A3B8;
    --tcf-text-3:    #64748B;
    --tcf-blue:      #5985BC;
    --tcf-blue-d:    #678FC6;
    --tcf-blue-l:    #A4C3DC;
    --tcf-blue-glow: rgba(89,133,188,.22);
    --tcf-shadow-l:  0 6px 20px rgba(0,0,0,.45);
  }
  /* Overrides ciblés pour les surfaces blanches hardcodées dans les pages mobiles */
  html[data-theme="dark"] body { background: var(--tcf-bg); color: var(--tcf-text); }
  html[data-theme="dark"] .hdr,
  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] header.app__hdr,
  html[data-theme="dark"] .app__hdr,
  html[data-theme="dark"] .qfilters,
  html[data-theme="dark"] .vmode,
  html[data-theme="dark"] .seg,
  html[data-theme="dark"] .day-bar,
  html[data-theme="dark"] .month__hdr,
  html[data-theme="dark"] .tk-toolbar,
  html[data-theme="dark"] .subhdr,
  html[data-theme="dark"] .schbar { background: var(--tcf-surface) !important; color: var(--tcf-text); border-bottom-color: var(--tcf-border); }
  html[data-theme="dark"] .ot,
  html[data-theme="dark"] .blk,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .tcf-card,
  html[data-theme="dark"] .tk-card,
  html[data-theme="dark"] .sheet,
  html[data-theme="dark"] .sheet__head,
  html[data-theme="dark"] .sheet__footer,
  html[data-theme="dark"] .sheet__body,
  html[data-theme="dark"] .tcf-input,
  html[data-theme="dark"] input[type="text"],
  html[data-theme="dark"] input[type="search"],
  html[data-theme="dark"] input[type="email"],
  html[data-theme="dark"] input[type="tel"],
  html[data-theme="dark"] input[type="number"],
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] select { background: var(--tcf-card) !important; color: var(--tcf-text) !important; border-color: var(--tcf-border) !important; }
  html[data-theme="dark"] .tabbar,
  html[data-theme="dark"] .bottom-nav,
  html[data-theme="dark"] nav.tabs { background: var(--tcf-surface); border-top-color: var(--tcf-border); }
  html[data-theme="dark"] .tab,
  html[data-theme="dark"] .nav-item { color: var(--tcf-text-2); }
  html[data-theme="dark"] .tab.is-active,
  html[data-theme="dark"] .tab[aria-current="true"],
  html[data-theme="dark"] .nav-item.is-active { color: var(--tcf-anis); }

  /* Hyperviseur mobile — toolbars/cards/tabs hardcodés en blanc */
  html[data-theme="dark"] .toolbar { background: var(--tcf-surface) !important; border-bottom-color: var(--tcf-border); }
  html[data-theme="dark"] .toolbar input[type="text"],
  html[data-theme="dark"] .toolbar select { background: var(--tcf-card) !important; color: var(--tcf-text); border-color: var(--tcf-border); }
  html[data-theme="dark"] .svc,
  html[data-theme="dark"] .stat-card { background: var(--tcf-card) !important; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
  html[data-theme="dark"] .skel { background: var(--tcf-card) !important; background-image: linear-gradient(90deg, var(--tcf-card) 0, var(--tcf-card-alt) 50%, var(--tcf-card) 100%) !important; }
  html[data-theme="dark"] .tabs { background: var(--tcf-surface) !important; border-top-color: var(--tcf-border); }
  html[data-theme="dark"] .tag--client { background: var(--tcf-card-alt) !important; color: var(--tcf-text); }

  /* CRM mobile (.rail rail filtres, .deal cards opps) */
  html[data-theme="dark"] .rail { background: var(--tcf-surface) !important; border-bottom-color: var(--tcf-border); }
  html[data-theme="dark"] .deal { background: var(--tcf-card) !important; color: var(--tcf-text); border-color: var(--tcf-border); box-shadow: 0 1px 3px rgba(0,0,0,.35); }

  /* Stock mobile (.sb search bar) */
  html[data-theme="dark"] .sb { background: var(--tcf-surface) !important; border-bottom-color: var(--tcf-border); }

  /* Dashboard mobile (.periods switcher, .kpi cards gradient blanc→F6F8FB) */
  html[data-theme="dark"] .periods { background: var(--tcf-surface) !important; border-bottom-color: var(--tcf-border); }
  html[data-theme="dark"] .kpi { background: var(--tcf-card) !important; background-image: linear-gradient(180deg, var(--tcf-card), var(--tcf-card-alt)) !important; color: var(--tcf-text); border-color: var(--tcf-border); }

  /* Interventions mobile (.otc cards calendrier, .seg__group sélecteur jour/semaine/mois) */
  html[data-theme="dark"] .otc { background: var(--tcf-card) !important; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
  html[data-theme="dark"] .otc:active { background: var(--tcf-card-alt) !important; }
  html[data-theme="dark"] .seg__group { background: var(--tcf-card-alt) !important; }
  html[data-theme="dark"] .seg__group button[aria-current="true"] { background: var(--tcf-card) !important; color: var(--tcf-blue-l) !important; }
  html[data-theme="dark"] .qchip { background: var(--tcf-card) !important; color: var(--tcf-text) !important; border-color: var(--tcf-border); }
}

