/* ==========================================================
   DCOMPT_READABILITY_AUDIT_V1
   Contraste + typographie mobile/desktop
   ========================================================== */

:root{
  --dcompt-readable-ink:#111827;
  --dcompt-readable-muted:#536174;
  --dcompt-readable-soft:#64748b;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  color:var(--dcompt-readable-ink);
  line-height:1.48;
}

/* -------- Surfaces claires -------- */

.panel,
.metric,
.smart-hero,
.alert-item,
.email-preview,
.document-preview,
.smart-answer,
.webhook-box,
.migration-map div{
  color:var(--dcompt-readable-ink);
}

.muted,
.page-title p,
.smart-hero p,
.metric span,
.metric small,
.alert-item span,
.expense-row span,
.user-box span,
.small-note{
  color:var(--dcompt-readable-muted) !important;
  opacity:1 !important;
}

/* -------- SCORE IA : correction critique -------- */

.smart-score{
  background:#172033 !important;
  color:#f8fafc !important;
}

.smart-score strong{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.20);
}

.smart-score span,
.smart-score small{
  color:#d9e2ef !important;
  -webkit-text-fill-color:#d9e2ef !important;
  opacity:1 !important;
}

/* -------- Formulaires -------- */

label{
  color:#334155 !important;
}

input,
select,
textarea{
  color:#172033 !important;
  background-color:#ffffff;
}

input::placeholder,
textarea::placeholder{
  color:#718096 !important;
  opacity:1;
}

/* -------- Tableaux -------- */

table{
  color:#172033;
}

th{
  color:#334155;
}

td{
  color:#172033;
}

/* -------- Chat IA -------- */

.ai-chat-head,
.ai-chat-head strong,
.ai-chat-head span{
  color:#f8fafc !important;
}

.ai-chat-head span{
  color:#d9e2ef !important;
}

/* -------- Liens -------- */

a{
  text-underline-offset:2px;
}

/* ==========================================================
   MOBILE
   Ne plus descendre le corps général à 13px.
   ========================================================== */

@media (max-width: 640px){

  body{
    font-size:14px !important;
    line-height:1.5;
  }

  label{
    font-size:13.5px !important;
  }

  input,
  select,
  textarea,
  button{
    font-size:14px;
  }

  .smart-hero h2{
    font-size:clamp(25px,7vw,32px) !important;
    line-height:1.16;
  }

  .smart-hero p{
    font-size:14px;
    line-height:1.55;
  }

  .smart-score strong{
    font-size:40px !important;
  }

  .smart-score span,
  .smart-score small{
    font-size:14px;
  }

  .metric span{
    font-size:14px !important;
  }

  .metric strong{
    line-height:1.18;
  }

  .panel-head h2{
    line-height:1.25;
  }
}

/* ==========================================================
   DESKTOP
   Augmentation modérée, sans effet "zoom".
   ========================================================== */

@media (min-width: 1100px){

  body{
    font-size:15px;
    line-height:1.5;
  }

  label{
    font-size:14px !important;
  }

  input,
  select,
  textarea,
  button{
    font-size:14.5px;
  }

  .page-title h1{
    font-size:28px;
    line-height:1.18;
  }

  .page-title p{
    font-size:15px;
  }

  .panel-head h2{
    font-size:19px;
  }

  .metric span{
    font-size:14px !important;
  }

  .metric strong{
    font-size:24px;
  }

  th,
  td{
    font-size:14px;
  }

  .nav button{
    font-size:14px;
  }

  .smart-hero h2{
    font-size:32px !important;
    line-height:1.18;
  }

  .smart-hero p{
    font-size:15px;
    line-height:1.55;
  }

  .smart-score strong{
    font-size:44px !important;
  }

  .smart-score span,
  .smart-score small{
    font-size:14px;
  }
}