/* ============================================================
   OUTILS DE GESTION — composants
   Design : aligné sur infos.css (palette, rayons, ombres)
   Cible : dirigeants TPE/PME, calculs interactifs
   ============================================================ */

/* ─────────────────────────────────────────────────
   1. HUB — page d'accueil "Outils de gestion"
   ───────────────────────────────────────────────── */

.outils-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--pc-50) 100%);
  border: 1px solid var(--pc-200);
  border-radius: var(--pc-radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
}

.outils-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle at top right, rgba(16,185,129,.08) 0%, transparent 70%);
  pointer-events: none;
}

.outils-hero h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 800;
  color: var(--pc-900);
  line-height: 1.1;
  margin-bottom: .75rem;
  letter-spacing: -0.02em;
}

.outils-hero .outils-subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--pc-600);
  max-width: 720px;
  line-height: 1.55;
  margin-bottom: 0;
}

/* Cards d'outils du hub */
.outils-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.outil-card {
  background: #fff;
  border: 1px solid var(--pc-200);
  border-radius: var(--pc-radius-md);
  padding: 1.5rem 1.4rem;
  text-decoration: none;
  color: var(--pc-900);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transition: var(--pc-transition);
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.outil-card:not(.is-disabled)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--outil-accent, var(--pc-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

.outil-card:not(.is-disabled):hover {
  border-color: var(--outil-accent, var(--pc-primary));
  transform: translateY(-3px);
  box-shadow: var(--pc-shadow-md);
  color: var(--pc-900);
}

.outil-card:not(.is-disabled):hover::after {
  transform: scaleX(1);
}

.outil-card.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.outil-card.is-disabled .outil-arrow {
  display: none;
}

.outil-card.is-disabled .outil-soon {
  display: inline-block;
}

.outil-card .outil-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--outil-accent-bg, var(--pc-primary-bg));
  color: var(--outil-accent, var(--pc-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: .25rem;
}

.outil-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: var(--pc-900);
  line-height: 1.3;
}

.outil-card .outil-desc {
  font-size: .88rem;
  color: var(--pc-500);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.outil-card .outil-arrow {
  margin-top: auto;
  font-size: .8rem;
  color: var(--outil-accent, var(--pc-primary));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.outil-card .outil-soon {
  display: none;
  margin-top: auto;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pc-500);
  background: var(--pc-100);
  padding: .25rem .65rem;
  border-radius: 99px;
  width: fit-content;
}

/* Couleurs par famille d'outil */
.outil-card.acc--diagnostic { --outil-accent: var(--pc-redressement); --outil-accent-bg: #fff7ed; }
.outil-card.acc--rentabilite { --outil-accent: var(--pc-sauvegarde);   --outil-accent-bg: #ecfdf5; }
.outil-card.acc--treso       { --outil-accent: var(--pc-primary);      --outil-accent-bg: var(--pc-primary-bg); }
.outil-card.acc--bfr         { --outil-accent: var(--pc-conciliation); --outil-accent-bg: #f5f3ff; }
.outil-card.acc--ratios      { --outil-accent: #0891b2;                --outil-accent-bg: #ecfeff; }

/* ─────────────────────────────────────────────────
   2. PAGE OUTIL — calculateur
   ───────────────────────────────────────────────── */

.outil-hero {
  border-left: 6px solid var(--outil-statut, var(--pc-primary));
  padding: 1.25rem 0 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.outil-hero .outil-eyebrow {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--outil-statut, var(--pc-primary));
  margin-bottom: .5rem;
}

.outil-hero h1 {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--pc-900);
  line-height: 1.15;
  margin-bottom: .75rem;
  letter-spacing: -0.015em;
}

.outil-hero .outil-intro {
  font-size: 1rem;
  color: var(--pc-600);
  line-height: 1.55;
  max-width: 760px;
  margin: 0;
}

.outil-hero.statut--alert    { --outil-statut: var(--pc-redressement); }
.outil-hero.statut--positif  { --outil-statut: var(--pc-sauvegarde); }
.outil-hero.statut--general  { --outil-statut: var(--pc-primary); }

/* Layout 2 colonnes : formulaire à gauche, résultat à droite */
.outil-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .outil-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Carte formulaire */
.outil-form {
  background: #fff;
  border: 1px solid var(--pc-200);
  border-radius: var(--pc-radius-md);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--pc-shadow-sm);
}

.outil-form h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-900);
  margin: 0 0 .25rem;
}

.outil-form .form-help {
  font-size: .85rem;
  color: var(--pc-500);
  margin-bottom: 1.25rem;
}

.outil-field {
  margin-bottom: 1.1rem;
}

.outil-field label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--pc-700);
  margin-bottom: .35rem;
  letter-spacing: .01em;
}

.outil-field label .field-tip {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--pc-500);
  margin-top: .15rem;
}

.outil-field .input-wrap {
  position: relative;
}

.outil-field input[type="number"] {
  width: 100%;
  padding: .65rem .85rem;
  padding-right: 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pc-900);
  background: #fff;
  border: 1.5px solid var(--pc-300);
  border-radius: var(--pc-radius-sm);
  transition: var(--pc-transition);
  font-family: 'Nunito', sans-serif;
  -moz-appearance: textfield;
}

.outil-field input[type="number"]::-webkit-outer-spin-button,
.outil-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.outil-field input[type="number"]:focus {
  outline: none;
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,.12);
}

.outil-field .input-suffix {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--pc-500);
  pointer-events: none;
  font-size: .9rem;
}

.outil-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}

@media (max-width: 575.98px) {
  .outil-field-group { grid-template-columns: 1fr; }
}

/* Carte résultat */
.outil-result {
  background: #fff;
  border: 1px solid var(--pc-200);
  border-radius: var(--pc-radius-md);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--pc-shadow-sm);
  position: sticky;
  top: 80px;
}

@media (max-width: 991.98px) {
  .outil-result { position: static; }
}

.outil-result h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pc-900);
  margin: 0 0 1.25rem;
}

/* État verdict (vert / orange / rouge / neutre) */
.verdict {
  border-radius: var(--pc-radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  border-left: 4px solid var(--verdict-color, var(--pc-300));
  background: var(--verdict-bg, var(--pc-50));
}

.verdict.is-empty { --verdict-color: var(--pc-300); --verdict-bg: var(--pc-50); }
.verdict.is-good  { --verdict-color: var(--pc-sauvegarde);   --verdict-bg: #ecfdf5; }
.verdict.is-warn  { --verdict-color: var(--pc-redressement); --verdict-bg: #fff7ed; }
.verdict.is-alert { --verdict-color: var(--pc-liquidation);  --verdict-bg: #fef2f2; }
.verdict.is-info  { --verdict-color: var(--pc-primary);      --verdict-bg: var(--pc-primary-bg); }

.verdict-eyebrow {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verdict-color);
  margin-bottom: .25rem;
}

.verdict-headline {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pc-900);
  line-height: 1.2;
  margin-bottom: .35rem;
}

.verdict-detail {
  font-size: .92rem;
  color: var(--pc-700);
  line-height: 1.5;
  margin: 0;
}

/* Données chiffrées en grille */
.result-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .75rem;
  margin: 1rem 0 1.25rem;
}

.result-data-cell {
  background: var(--pc-50);
  border-radius: var(--pc-radius-sm);
  padding: .75rem .85rem;
  text-align: left;
  border: 1px solid var(--pc-100);
  /* Layout interne : label en haut, valeur collée en bas — alignement parfait
     entre cellules même quand certains labels font 1 ligne et d'autres 2 lignes. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 76px;
}

.result-data-cell .cell-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--pc-500);
  margin-bottom: .35rem;
  /* Réserve la place de 2 lignes même si le label tient sur 1 (alignement vertical) */
  min-height: 2.2em;
  line-height: 1.1;
}

.result-data-cell .cell-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pc-900);
  line-height: 1.1;
  margin-top: auto;
}

.result-data-cell .cell-unit {
  font-size: .8rem;
  font-weight: 600;
  color: var(--pc-500);
  margin-left: .15rem;
}

/* Conteneur graphique Chart.js */
.chart-wrap {
  position: relative;
  margin: 1rem 0 1.25rem;
  background: var(--pc-50);
  border-radius: var(--pc-radius-sm);
  padding: 1rem;
  min-height: 140px;
}

/* Bouton "Obtenir une analyse Claude" */
.btn-conseil {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--pc-conciliation) 0%, #6d28d9 100%);
  color: #fff;
  border: none;
  border-radius: var(--pc-radius-md);
  padding: .75rem 1.25rem;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: var(--pc-transition);
  box-shadow: 0 2px 8px rgba(139,92,246,.25);
  width: 100%;
  justify-content: center;
}

.btn-conseil:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139,92,246,.35);
}

.btn-conseil:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.btn-conseil .btn-icon { font-size: 1.1rem; }

/* Panneau réponse Claude */
.conseil-panel {
  margin-top: 1rem;
  background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
  border: 1px solid #e9d5ff;
  border-radius: var(--pc-radius-md);
  padding: 1.25rem 1.4rem;
  display: none;
}

.conseil-panel.is-visible { display: block; }
.conseil-panel.is-loading { display: block; }

.conseil-panel-header {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pc-conciliation);
}

.conseil-panel-header i { font-size: 1.1rem; }

.conseil-loading {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--pc-600);
  font-size: .92rem;
}

.conseil-loading::before {
  content: '';
  width: 16px; height: 16px;
  border: 2px solid var(--pc-300);
  border-top-color: var(--pc-conciliation);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.conseil-content {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--pc-800);
}

.conseil-content h4 {
  font-size: .98rem;
  font-weight: 700;
  color: var(--pc-900);
  margin: 1rem 0 .35rem;
}

.conseil-content h4:first-child { margin-top: 0; }

.conseil-content ul {
  padding-left: 1.25rem;
  margin: .5rem 0;
}

.conseil-content li {
  margin-bottom: .35rem;
}

.conseil-content p { margin-bottom: .65rem; }

.conseil-error {
  color: var(--pc-liquidation);
  background: #fef2f2;
  border-left: 3px solid var(--pc-liquidation);
  padding: .75rem 1rem;
  border-radius: var(--pc-radius-sm);
  font-size: .9rem;
  margin: 0;
}

/* Section "Comment lire ce résultat" */
.outil-explain {
  margin: 2rem 0 1rem;
}

.outil-explain h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-900);
  margin: 0 0 1rem;
}

.outil-explain h2::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--pc-primary);
  margin-bottom: .65rem;
}

.outil-explain p {
  font-size: .98rem;
  line-height: 1.65;
  color: var(--pc-700);
  margin-bottom: 1rem;
}

.outil-explain ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.outil-explain li {
  margin-bottom: .4rem;
  line-height: 1.55;
  color: var(--pc-700);
}

.outil-explain strong { color: var(--pc-900); }

/* Disclaimer */
.outil-disclaimer {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--pc-100);
  border-radius: var(--pc-radius-sm);
  font-size: .82rem;
  color: var(--pc-600);
  line-height: 1.55;
  border-left: 3px solid var(--pc-400);
}

.outil-disclaimer strong { color: var(--pc-700); }