/* ==========================================================================
   CALCULATEUR eDPI : feuille du composant PARTAGÉ.

   Elle accompagne resources/views/public/partials/outil-edpi.blade.php et
   public/js/outil-edpi.js. Une page outil dédiée reprendra les trois
   ensemble (décision client) : rien ici ne suppose la page sensibilité.

   Autonome par principe. Les seules variables consommées sont celles de la
   charte, posées en :root par agent.css sur toutes les pages du site
   (--coral, --coral-light, --dark, --bg, --white, --text-light). Les couleurs
   de la jauge (vert, bleu, corail) sont des littéraux : ce sont les paliers de
   l'échelle eDPI, pas la palette d'une page.
   ========================================================================== */

  .calc { margin: 26px 0; border-radius: 18px; overflow: hidden;
    border: 1px solid #ececec; background: var(--white); }

  /* ===== En-tête ===== */
  .calc-head { padding: 18px 24px 14px; border-bottom: 1px solid #f2f2f2;
    display: flex; align-items: center; gap: 12px; }
  .calc-head .ch-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--coral-light);
    display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
  /* Le titre est stylé par sa CLASSE, jamais par sa balise : le partiel laisse
     la page choisir son niveau de titre selon son plan (h3 ici, h2 sur une
     page dont l'outil serait le sujet). */
  .calc-head .calc-titre { margin: 0 0 1px; font-size: 0.98rem; font-weight: 700; color: var(--dark); }
  .calc-head span { font-size: 0.72rem; color: var(--text-light); }

  /* ===== Corps : saisie à gauche, résultat à droite ===== */
  .calc-body { padding: 22px 24px 24px; display: grid; grid-template-columns: 1fr 1fr;
    gap: 20px; align-items: start; }
  .calc-inputs { display: grid; gap: 16px; }
  .field label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-light); margin-bottom: 7px; }
  .field input { width: 100%; padding: 11px 14px; border: 1px solid #e4e4e4; border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--dark);
    outline: none; transition: border-color 0.2s; }
  .field input:focus { border-color: var(--coral); }
  .field .field-hint { display: block; margin-top: 5px; font-size: 0.68rem; color: #b4b4b4; }

  .calc-out { background: var(--bg); border-radius: 14px; padding: 20px; }
  .out-main { text-align: center; padding-bottom: 16px; border-bottom: 1px solid #ececec; margin-bottom: 16px; }
  .out-main .om-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #b4b4b4; }
  .out-main .om-val { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; line-height: 1;
    color: var(--dark); letter-spacing: 1px; }
  .out-main .om-cat { display: inline-block; margin-top: 6px; font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px; padding: 4px 12px; border-radius: 6px;
    background: var(--coral-light); color: var(--coral-dark); }

  /* Jauge : échelle de 100 à 700 eDPI, bascules à 250 (25 %) et 400 (50 %). */
  .gauge { height: 8px; border-radius: 4px; margin-bottom: 8px; position: relative;
    background: linear-gradient(90deg,
      #4cc9b0 0%, #4cc9b0 23%, #5c8ee6 27%,
      #5c8ee6 48%, #e8637e 52%, #e8637e 100%); }
  .gauge .g-cursor { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px;
    background: var(--dark); box-shadow: 0 0 0 3px var(--bg); transform: translateX(-50%);
    transition: left 0.25s ease; z-index: 2; }
  .gauge .g-pro { position: absolute; top: -3px; width: 2px; height: 14px;
    background: rgba(255,255,255,0.85); transform: translateX(-50%); border-radius: 1px; }
  .gauge-legend { position: relative; height: 14px; font-size: 0.62rem; color: #b4b4b4; margin-bottom: 14px; }
  .gauge-legend span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
  .gauge-legend span:first-child { transform: none; }
  .gauge-legend span:last-child { transform: translateX(-100%); }

  .out-rows { display: grid; gap: 9px; }
  .out-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.78rem; }
  .out-row span { color: var(--text-light); }
  .out-row b { color: var(--dark); font-size: 0.85rem; white-space: nowrap; }

  .calc-note { padding: 12px 24px 16px; font-size: 0.72rem; color: #b0b0b0; font-style: italic;
    border-top: 1px solid #f2f2f2; }

  /* Sous 1024 px la saisie passe au-dessus du résultat, comme dans la
     maquette : deux colonnes deviennent illisibles à cette largeur. */
  @media (max-width: 1024px) {
    .calc-body { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gauge .g-cursor { transition-duration: 0.01ms; }
  }