/* ==========================================================================
   OUTIL TAILLE DE SOURIS : feuille du composant PARTAGÉ.

   Elle accompagne resources/views/public/partials/outil-souris.blade.php et
   public/js/outil-souris.js. Même rangement que le calculateur eDPI : les
   trois fichiers se posent ensemble sur n'importe quelle page.

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

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

  /* ===== En-tête ===== */
  .tool-head { padding: 18px 24px 14px; border-bottom: 1px solid #f2f2f2;
    display: flex; align-items: center; gap: 12px; }
  .tool-head .th-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. */
  .tool-head .tool-titre { margin: 0 0 1px; font-size: 0.98rem; font-weight: 700; color: var(--dark); }
  .tool-head span { font-size: 0.72rem; color: var(--text-light); }

  /* ===== Corps : saisie à gauche, résultat à droite ===== */
  .tool-body { padding: 22px 24px 24px; display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px; align-items: start; }
  .tool .field { margin-bottom: 16px; }
  .tool .field:last-child { margin-bottom: 0; }
  .tool .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; }
  .tool .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; }
  .tool .field input:focus { border-color: var(--coral); }
  .tool .field .hint { display: block; margin-top: 6px; font-size: 0.68rem; color: #b4b4b4; }

  /* Les trois prises, en boutons segmentés. */
  .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .seg button { padding: 10px 6px; border: 1px solid #e4e4e4; background: var(--white); border-radius: 9px;
    font-family: 'DM Sans', sans-serif; font-size: 0.74rem; font-weight: 600; color: var(--text-light);
    cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
  .seg button:hover { border-color: #ccc; color: var(--text); }
  .seg button:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
  .seg button.on { background: var(--dark); border-color: var(--dark); color: white; }

  .tool-out { background: var(--bg); border-radius: 14px; padding: 20px; }
  .tool-out .out-main { text-align: center; padding-bottom: 15px; border-bottom: 1px solid #ececec; margin-bottom: 15px; }
  .tool-out .om-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #b4b4b4; }
  .tool-out .om-val { font-family: 'Bebas Neue', sans-serif; font-size: 2.1rem; line-height: 1.1;
    color: var(--dark); letter-spacing: 1px; }
  .tool-out .om-cat { display: inline-block; margin-top: 5px; 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); }
  .tool-out .out-rows { display: grid; gap: 9px; }
  .tool-out .out-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.78rem; }
  .tool-out .out-row span { color: var(--text-light); }
  .tool-out .out-row b { color: var(--dark); font-size: 0.85rem; text-align: right; }

  /* ===== CORRESPONDANCES (phase 2) =====
     Posées SOUS le corps de l'outil et sur toute sa largeur, pas dans la
     colonne de résultat : à 354 px, trois mini-cartes seraient illisibles, et
     le bloc doit rester lisible tel quel en mobile. */
  .tool-match { padding: 0 24px 20px; }
  .tm-head { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-light); padding: 16px 0 12px; border-top: 1px solid #f2f2f2; }
  .tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

  .tm-carte { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
    border: 1px solid #ececec; background: var(--white); text-decoration: none; color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
  .tm-carte:hover { transform: translateY(-2px); border-color: rgba(232,99,126,0.3);
    box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
  .tm-img { width: 44px; height: 44px; border-radius: 8px; background: var(--white); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; padding: 4px; }
  .tm-img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
  .tm-corps { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .tm-titre { font-size: 0.78rem; font-weight: 700; color: var(--dark); line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tm-mesures { font-size: 0.66rem; color: #b4b4b4; margin-top: 2px; }
  .tm-prix { font-family: 'Bebas Neue', sans-serif; font-size: 0.95rem; color: var(--coral-dark);
    letter-spacing: 0.5px; flex-shrink: 0; white-space: nowrap; }

  .tm-notice { margin: 12px 0 0; font-size: 0.66rem; color: #b4b4b4; line-height: 1.5; }

  .tool-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. */
  @media (max-width: 1024px) {
    .tool-body { grid-template-columns: 1fr; }
    /* Deux mini-cartes de front restent lisibles à cette largeur. */
    .tm-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .tool-match { padding: 0 18px 18px; }
    .tm-grid { grid-template-columns: 1fr; }
  }