/* Outils en ligne (/outils) : chargée seulement sur ces pages, après rack-ds.css.
   Toutes les valeurs passent par les tokens du design system. */

.outil-page > .container { max-width: 56rem; }

.outil-entete { margin-bottom: var(--space-8); }
.outil-entete h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--space-5); }
.outil-entete .lead p:last-child { margin-bottom: 0; }

.outil-carte {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}
.outil-carte + .outil-carte { margin-top: var(--space-7); }
.outil-carte h2 { font-size: var(--text-md); margin: 0 0 var(--space-5); }

.outil-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.outil-champ label,
.outil-champ legend {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-2);
  float: none;
  padding: 0;
}
.outil-champ small { display: block; color: var(--text-muted); margin-top: var(--space-2); }
.outil-champ .form-control,
.outil-champ .form-select { width: 100%; background-color: var(--neutral-50); }
.outil-mono { font-family: var(--font-mono, monospace); }

.outil-resultat {
  display: block;
  background: var(--violet-50);
  border-radius: var(--radius-card);
  padding: var(--space-7);
}
.outil-valeur {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.2;
  color: var(--brand);
  overflow-wrap: anywhere;
}
.outil-resultat p { margin: var(--space-4) 0 0; }
.outil-resultat ul { margin: var(--space-4) 0 0; padding-left: 1.25rem; }
.outil-resultat--ok { background: var(--green-50); }
.outil-resultat--non { background: var(--red-50, #fdecea); }
.outil-resultat--doute { background: var(--yellow-100); }
.outil-resultat--ok .outil-valeur,
.outil-resultat--non .outil-valeur,
.outil-resultat--doute .outil-valeur { color: var(--ink); }

.outil-lignes { margin: var(--space-5) 0 0; display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: var(--space-2) var(--space-5); }
.outil-lignes dt { font-weight: var(--weight-bold); }
.outil-lignes dd { margin: 0; overflow-wrap: anywhere; }

.outil-anneaux { display: flex; gap: .4rem; align-items: stretch; height: 3.25rem; padding: 0 1rem; background: #e7d3a8; border-radius: 1.5rem; width: max-content; max-width: 100%; margin-bottom: var(--space-6); }
.outil-anneaux span { width: 1rem; border-left: 1px solid rgba(0, 0, 0, .25); border-right: 1px solid rgba(0, 0, 0, .25); }

.outil-confidentialite { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-5) 0 0; }

.outil-contenu { margin-top: var(--space-9, 3rem); max-width: none; }
.outil-contenu h2 { margin-top: var(--space-9, 3rem); }
.outil-contenu .rack-table-wrap { margin: var(--space-6) 0; background: var(--white); border-radius: var(--radius-card); }
.outil-contenu code,
.outil-resultat code { overflow-wrap: anywhere; }

.outil-faq { background: var(--white); border-radius: var(--radius-card); padding: var(--space-6) var(--space-7); margin-bottom: var(--space-4); }
.outil-faq summary { font-weight: var(--weight-bold); cursor: pointer; }
.outil-faq > div { margin-top: var(--space-4); }
.outil-faq p:last-child { margin-bottom: 0; }

.outil-suite { margin-top: var(--space-9, 3rem); background: var(--white); border-radius: var(--radius-card); padding: var(--space-8); }
.outil-suite h3 { margin-top: var(--space-6); }
.outil-suite ul { margin-bottom: 0; }
.outil-signature { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-7) 0 0; }

.outil-famille { margin-top: var(--space-9, 3rem); }
.outil-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-6); }
.outil-tuile {
  display: block;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  color: var(--text-body);
  text-decoration: none;
}
.outil-tuile:hover,
.outil-tuile:focus { color: var(--text-body); box-shadow: var(--shadow-lg, var(--shadow-md)); }
.outil-tuile strong { display: block; color: var(--brand); margin-bottom: var(--space-3); }
.outil-tuile span { font-size: var(--text-sm); }

.outil-etape[hidden] { display: none; }
.outil-choix { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (max-width: 575.98px) {
  .outil-carte, .outil-suite { padding: var(--space-6); }
  .outil-lignes { grid-template-columns: 1fr; gap: 0; }
  .outil-lignes dd { margin-bottom: var(--space-3); }
}