/* ============================================================
   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;

    /* 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 */
    --tcf-font-head:   'Oswald','Montserrat',sans-serif;
    --tcf-font-body:   'Montserrat',-apple-system,sans-serif;
    --tcf-font-mono:   'JetBrains Mono','DM Mono',monospace;
  }

  /* 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+. */
}

/* ---------- 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;
    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;
  }
}

/* ---------- COPILOT WIDGET (Anthony 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 {
  /* Intentionnellement vide en Phase 1. */
}

/* ---------- LEGACY ---------- */
@layer legacy {
  /* Réservé pour accueillir les règles héritées quand
     on voudra les sortir du <style> inline sans leur
     donner priorité sur les nouveaux composants. */
}
