/* ═══════════════════════════════════════════════════════════════════════
   theobaudry.fr — outils

   Feuille chargee UNIQUEMENT sur les pages qui portent un outil (la cle
   `tool` du JSON declenche le <link>). Elle ne redefinit rien de la charte :
   les couleurs, les polices et les rayons viennent de site.css.

   Vocabulaire commun a tous les outils, pour qu'ils se ressemblent sans
   etre copies-colles : .tool-panel (une carte), .tool-field (un champ),
   .tool-out (la zone de resultat), .tool-btn (une action).
   ═══════════════════════════════════════════════════════════════════════ */

.section-tool { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4rem); }

.tool-shell { max-width: 68rem; margin-inline: auto; }

/* ─── Disposition : reglages a gauche, resultat a droite ─── */
.tool-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}

.tool-split.is-wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .tool-split,
  .tool-split.is-wide-left { grid-template-columns: 1fr; }
}

/* ─── Une carte ─── */
.tool-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.35rem;
  padding: 1.35rem 1.35rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

/* Empilement des cartes : par la gouttiere de la colonne, pas par une
   marge entre voisines. La regle `+` s'appliquait aussi a deux cartes
   COTE A COTE dans la grille, et faisait descendre la colonne de droite
   de 18 pixels. */
.tool-split > div { display: grid; align-content: start; gap: 1.15rem; }
.tool-split > div > .tool-panel { margin: 0; }

.tool-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Hauteur fixe : sans elle, une carte dont le titre porte une pastille
     est plus haute que ses voisines, et tout ce qui suit se decale. */
  min-height: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
}

/* La carte de resultat est collante : sur un formulaire long, le resultat
   reste visible pendant qu'on regle les champs. */
.tool-panel.is-sticky { position: sticky; top: 6.5rem; }

@media (max-width: 900px) { .tool-panel.is-sticky { position: static; } }

/* ─── Champs ─── */
/* `align-content: start` est indispensable : sans lui, un champ place dans
   une rangee cote a cote avec un champ plus haut voit ses rangees de grille
   s'etirer, et son input passe de 40 a 45 pixels. Deux champs voisins
   n'avaient donc pas la meme taille. */
.tool-field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.tool-field:last-child { margin-bottom: 0; }

.tool-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  align-items: start;
}

/* Les libelles d'une meme rangee s'alignent meme quand l'un passe sur deux
   lignes ou porte une mention « obligatoire ». */
.tool-row .tool-label { min-height: 1.5rem; align-items: center; }

/* Alignement en Y des trois niveaux d'un champ. Sans lui, un libelle qui
   passe sur deux lignes decale la saisie et l'indice de ses voisins. La
   sous-grille fait porter les rangees par le parent : libelles entre eux,
   saisies entre elles, indices entre eux. */
@supports (grid-template-rows: subgrid) {
  .tool-row > .tool-field {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* Nombre de colonnes explicite : en auto-fit, une rangee de trois ou quatre
   champs cassait en 2 + 1 ou 3 + 1 selon la largeur, ce qui donnait une
   derniere ligne bancale. */
.tool-row.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-row.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool-row.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1280px) {
  .tool-row.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tool-row.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tool-row,
  .tool-row.is-2,
  .tool-row.is-3,
  .tool-row.is-4 { grid-template-columns: 1fr; }
}

.tool-label {
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.tool-label .req { color: var(--accent); font-size: 0.75rem; }

.tool-hint { font-size: 0.75rem; line-height: 1.5; color: var(--slate); margin: 0; }

.tool-input,
.tool-select,
.tool-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  padding: 0.6rem 0.8rem;
  transition: border-color 0.25s var(--smooth), box-shadow 0.25s var(--smooth);
}

.tool-textarea { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65; resize: vertical; }
.tool-textarea.is-tall { min-height: 15rem; }

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.14);
}

.tool-input.is-error { border-color: #C2410C; }

/* Champ avec unite accolee (€, %, x) */
.tool-unit { position: relative; }
.tool-unit .tool-input { padding-right: 2.4rem; }
.tool-unit::after {
  content: attr(data-unit);
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--slate);
  pointer-events: none;
}

/* ─── Cases a cocher en pastilles ─── */
.tool-checks { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.tool-check { position: relative; }
/* Case masquee visuellement mais toujours atteignable au clavier : une
   taille nulle suffit a Chrome, pas a tous les lecteurs d'ecran. */
.tool-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.tool-check span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  font-size: 0.8125rem;
  color: var(--steel);
  cursor: pointer;
  transition: all 0.25s var(--smooth);
  user-select: none;
}

.tool-check input:checked + span {
  background: rgba(79, 107, 255, 0.1);
  border-color: rgba(79, 107, 255, 0.32);
  color: var(--accent);
  font-weight: 550;
}

.tool-check input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.2); }
.tool-check code { font-family: var(--font-mono); font-size: 0.6875rem; opacity: 0.75; }

/* ─── Actions ─── */
.tool-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin-top: 1.15rem;
  align-items: stretch;
}

/* Un bouton seul dans un champ heritait de la largeur du champ et se
   confondait avec une zone de saisie. */
.tool-field > .tool-btn { justify-self: start; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.8438rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.25s var(--smooth);
}

.tool-btn:hover { border-color: rgba(79, 107, 255, 0.35); color: var(--accent); }

.tool-btn.is-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool-btn.is-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-btn.is-done { border-color: rgba(22, 163, 74, 0.4); color: #15803D; }
.tool-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tool-btn svg { width: 0.85rem; height: 0.85rem; }

/* ─── Resultat ─── */
.tool-out {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  min-height: 6rem;
  max-height: 26rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.tool-out:empty::before { content: attr(data-empty); color: var(--slate); }

.tool-count {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ─── Chiffres mis en avant ─── */
/* Deux colonnes fixes : en auto-fit, quatre chiffres se rangeaient en
   3 + 1, ce qui donne une derniere ligne bancale. */
.tool-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 420px) { .tool-stats { grid-template-columns: 1fr; } }

.tool-stat {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  padding: 0.85rem 0.95rem;
}

.tool-stat.is-key {
  background: rgba(79, 107, 255, 0.07);
  border-color: rgba(79, 107, 255, 0.22);
}

.tool-stat-v {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.tool-stat.is-key .tool-stat-v { color: var(--accent); }
.tool-stat-v em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; }
.tool-stat-l { font-size: 0.75rem; line-height: 1.4; color: var(--slate); margin-top: 0.25rem; }

/* ─── Petit tableau de resultat ─── */
.tool-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tool-table th,
.tool-table td { padding: 0.55rem 0.6rem; text-align: right; border-top: 1px solid var(--hairline); }
.tool-table th:first-child,
.tool-table td:first-child { text-align: left; }

.tool-table thead th {
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
}

.tool-table td { color: var(--steel); }
.tool-table td:first-child { color: var(--ink); font-weight: 550; }
.tool-table tr.is-key td { background: rgba(79, 107, 255, 0.06); color: var(--ink); font-weight: 550; }
.tool-table-wrap { overflow-x: auto; }

/* ─── Avertissement ─── */
.tool-warn {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: rgba(194, 65, 12, 0.06);
  border: 1px solid rgba(194, 65, 12, 0.2);
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #7C2D12;
  margin-top: 0.9rem;
}

.tool-warn[hidden] { display: none; }
.tool-warn svg { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: 0.15rem; }

.tool-note {
  max-width: 68rem;
  margin: 1.35rem auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--slate);
}

/* ─── Segments ordonnables (convention de nommage) ─── */
.seg-list { display: grid; gap: 0.4rem; }

.seg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 0.5rem;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
}

.seg-key { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--slate); }
.seg-name { font-size: 0.8125rem; font-weight: 550; color: var(--ink); }
.seg .tool-input { padding: 0.4rem 0.6rem; font-size: 0.8125rem; }
.seg-tools { display: flex; gap: 0.2rem; }

.seg-btn {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--steel);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s var(--smooth);
}

.seg-btn:hover { color: var(--accent); border-color: rgba(79, 107, 255, 0.35); }
.seg-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.seg-empty { font-size: 0.8125rem; color: var(--slate); padding: 0.9rem 0; }

@media (max-width: 560px) {
  .seg { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .seg-key { grid-column: 1 / -1; }
}

/* ─── Apercu du nom construit ─── */
.name-preview {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink);
  background: rgba(79, 107, 255, 0.07);
  border: 1px solid rgba(79, 107, 255, 0.22);
  border-radius: 0.9rem;
  padding: 0.8rem 0.95rem;
  word-break: break-all;
}

.name-preview + .name-preview { margin-top: 0.5rem; }
.name-level {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.2rem;
}

/* ─── Onglets ─── */
.tool-tabs { display: flex; gap: 0.35rem; margin-bottom: 1.15rem; flex-wrap: wrap; }

.tool-tab {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--steel);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.25s var(--smooth);
}

.tool-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ═══ Sommaire des outils ═══ */
.section-toolgrid { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--canvas); }

.toolgrid {
  max-width: 68rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}

.toolcard {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.35rem;
  padding: 1.25rem 1.3rem 1.35rem;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s var(--smooth), box-shadow 0.3s var(--smooth), border-color 0.3s var(--smooth);
}

a.toolcard:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 107, 255, 0.28);
  box-shadow: var(--shadow-deep);
}

.toolcard.is-soon { opacity: 0.62; }

.toolcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }

.toolcard-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 107, 255, 0.09);
  color: var(--accent);
}

.toolcard-icon svg { width: 1.15rem; height: 1.15rem; }

.toolcard-go { color: var(--slate); font-size: 0.875rem; transition: color 0.25s var(--smooth); }
a.toolcard:hover .toolcard-go { color: var(--accent); }

.toolcard-soon {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
}

.toolcard-title { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.012em; color: var(--ink); }
.toolcard-title em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: var(--accent); }
.toolcard-text { font-size: 0.875rem; line-height: 1.6; color: var(--steel); }

.toolcard-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }

.toolcard-tag {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO COMPACT DES PAGES D'OUTILS

   Ni portrait, ni chiffres, ni badges flottants. Sur une page utilitaire le
   visiteur vient se servir : l'outil doit etre visible sans defiler, ou
   presque. La presentation descend dans un encart, sous l'outil.
   ═══════════════════════════════════════════════════════════════════════ */
#hero.hero-lite { padding: 8.5rem 0 0; min-height: 0; }

.hero-lite-inner { max-width: 46rem; }

.hero-lite h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0.85rem 0 0.75rem;
}

.hero-lite .hero-sub {
  font-size: 1.0313rem;
  line-height: 1.65;
  max-width: 42rem;
  margin: 0;
}

@media (max-width: 768px) { #hero.hero-lite { padding: 7rem 0 0; } }

/* ═══ Encart de presentation ═══ */
.section-authorcard { padding: 0 0 clamp(2rem, 4vw, 3rem); }

.authorcard {
  max-width: 68rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.35rem;
  padding: 1.1rem 1.35rem;
  box-shadow: var(--shadow-soft);
}

.authorcard-photo {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 1px solid var(--hairline);
}

.authorcard-body { min-width: 0; }

.authorcard-title {
  font-size: 0.9688rem;
  font-weight: 620;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 0.15rem;
}

.authorcard-title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.authorcard-text { font-size: 0.875rem; line-height: 1.55; color: var(--steel); margin: 0; }

.authorcard-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.6rem 1.05rem;
  border-radius: 0.8rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.8438rem;
  font-weight: 550;
  text-decoration: none;
  transition: background 0.3s var(--smooth), transform 0.3s var(--smooth);
}

.authorcard-cta svg { width: 0.7rem; height: 0.7rem; }
.authorcard-cta:hover { background: var(--accent); transform: translateY(-1px); }

@media (max-width: 640px) {
  .authorcard { grid-template-columns: auto minmax(0, 1fr); row-gap: 0.85rem; }
  .authorcard-cta { grid-column: 1 / -1; justify-content: center; }
}

/* ─── Les trois listes du combinateur ─── */
.mt-lists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
}

.mt-lists .tool-textarea.is-tall { min-height: 12rem; }

.tool-opt {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
}

/* Le compteur pousse a droite, la pastille le suit : sans ca une carte
   sans pastille alignait son compteur differemment des autres. */
.tool-panel-title .tool-count { margin-left: auto; }
.tool-panel-title .tool-opt { margin-left: 0.4rem; }

@media (max-width: 860px) { .mt-lists { grid-template-columns: 1fr; } }

/* ─── Verdict : la comparaison qui decide ─── */
.tool-verdict {
  display: grid;
  gap: 0.3rem;
  margin-top: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--steel);
}

.tool-verdict[hidden] { display: none; }

.tool-verdict-label {
  font-family: var(--font-mono);
  font-size: 0.5938rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
}

.tool-verdict.is-bon {
  background: rgba(22, 163, 74, 0.07);
  border-color: rgba(22, 163, 74, 0.25);
}
.tool-verdict.is-bon .tool-verdict-label { color: #15803D; }

.tool-verdict.is-limite {
  background: rgba(180, 120, 20, 0.08);
  border-color: rgba(180, 120, 20, 0.26);
}
.tool-verdict.is-limite .tool-verdict-label { color: #92400E; }

.tool-verdict.is-mauvais {
  background: rgba(194, 65, 12, 0.07);
  border-color: rgba(194, 65, 12, 0.24);
}
.tool-verdict.is-mauvais .tool-verdict-label { color: #9A3412; }

/* ─── Paires cle / valeur (parametres hors UTM) ─── */
.kv-list { display: grid; gap: 0.4rem; }

.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 0.45rem;
}

.kv .tool-input { padding: 0.42rem 0.6rem; font-size: 0.8125rem; }
.kv-eq { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--slate); }

.kv-vide { font-size: 0.8125rem; color: var(--slate); }

@media (max-width: 520px) {
  .kv { grid-template-columns: minmax(0, 1fr) auto; }
  .kv-eq { display: none; }
}

/* ─── Terme technique ───
   Les outils doivent rester lisibles par un debutant tout en etant
   reconnus par un praticien. Le sigle metier est donc affiche a cote du
   libelle en clair, jamais a sa place. */
.tool-tech,
.tool-stat-l b {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.tool-tech {
  font-size: 0.5938rem;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(79, 107, 255, 0.09);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
  margin-left: 0.1rem;
}

.tool-stat-l b {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.tool-stat.is-key .tool-stat-l b { color: var(--accent); }
.tool-hint a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* ═══════════════════════════════════════════════════════════════════════
   RYTHME D'UNE PAGE D'OUTIL

   Le probleme que l'audit d'alignement ne voyait pas : chaque bloc etait
   correct chez lui, mais ils n'etaient pas d'accord entre eux. Sur une
   fenetre de 1440px, l'outil et la grille couraient de 176 a 1264, la FAQ
   de 310 a 1130 : 134 pixels de retrait de chaque cote, visibles a l'oeil
   nu. Et les espaces entre blocs valaient 64, puis 208, puis 150 pixels.

   Une page d'outil impose donc DEUX constantes a tous ses blocs :
   une largeur de contenu, et un espace entre sections. Rien d'autre.
   ═══════════════════════════════════════════════════════════════════════ */
.page-outil {
  --outil-largeur: 68rem;
  --outil-rythme: clamp(3rem, 5vw, 4.5rem);
}

/* Largeur unique. La FAQ vient de la home, ou elle est volontairement plus
   etroite ; sur une page d'outil elle s'aligne sur le reste. */
.page-outil .tool-shell,
.page-outil .authorcard,
.page-outil .toolgrid,
.page-outil .faq-list,
.page-outil .tool-note,
.page-outil #faq .section-header,
.page-outil .section-toolgrid .section-header {
  max-width: var(--outil-largeur);
  margin-inline: auto;
}

/* Espace unique entre sections : une seule valeur, portee par le haut de
   chaque section, pour qu'aucune addition de marges ne la double. */
.page-outil .section-tool,
.page-outil .section-authorcard,
.page-outil #faq,
.page-outil .section-toolgrid {
  padding-top: var(--outil-rythme);
  padding-bottom: 0;
}

/* La derniere section rend sa respiration avant le bandeau de pied. */
.page-outil .section-toolgrid { padding-bottom: var(--outil-rythme); }

/* L'outil suit immediatement le hero : il n'a pas besoin du rythme plein. */
.page-outil .section-tool { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

/* Les en-tetes de section d'une page d'outil sont plus sobres : sur une
   page utilitaire, un titre haut de 200 pixels repousse l'essentiel. */
.page-outil #faq .section-header,
.page-outil .section-toolgrid .section-header { margin-bottom: 1.75rem; }

.page-outil #faq .section-header h2,
.page-outil .section-toolgrid .section-header h2 {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.12;
}

.page-outil #faq .section-header .eyebrow,
.page-outil .section-toolgrid .section-header .eyebrow { margin-bottom: 0.85rem; }

/* La marge basse du dernier element de la FAQ s'echappe de sa section
   (padding-bottom a zero) et pousse la section suivante de 12 pixels. */
.page-outil .faq-item:last-child,
.page-outil .faq-list { margin-bottom: 0; }

/* Deux cartes reellement cote a cote s'etirent a la meme hauteur. Une
   carte plus courte que sa voisine se voit immediatement, et c'est ce qui
   donne l'impression de bricolage bien avant un pixel de decalage dans un
   champ.

   Ne s'applique QUE si les deux enfants sont des cartes : quand la colonne
   de gauche est un empilement et celle de droite un panneau collant, le
   collant doit rester libre de sa hauteur, c'est sa raison d'etre. */
.tool-split:has(> .tool-panel:first-child):has(> .tool-panel:last-child),
.mt-lists { align-items: stretch; }

.mt-lists .tool-panel { display: grid; grid-template-rows: auto 1fr; }
.mt-lists .tool-textarea { height: 100%; }

/* Pastilles en grille reguliere plutot qu'en flux : en flex-wrap, cinq
   pastilles de largeurs differentes laissaient la derniere seule sur sa
   ligne. En grille, les lignes sont pleines et les largeurs egales. */
.tool-checks.is-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.45rem;
}

.tool-checks.is-grille .tool-check span {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* La zone de resultat occupe la hauteur disponible : sans cela le panneau
   de droite garde un vide sous ses boutons quand il s'etire a la hauteur
   de son voisin. */
.tool-panel.is-remplissage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
}

.tool-panel.is-remplissage .tool-out { height: 100%; min-height: 6rem; }

/* ─── Diagnostic ─── */
.diag-list { display: grid; gap: 1.25rem; }

.diag-q { display: grid; gap: 0.55rem; }

.diag-q-texte {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

.diag-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--accent);
  background: rgba(79, 107, 255, 0.09);
  border-radius: 999px;
  padding: 0.12rem 0.42rem;
}

/* Les reponses sont longues : la grille les met a largeur egale plutot que
   de laisser une orpheline en bout de ligne. */
.diag-q .tool-checks.is-grille { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.diag-q .tool-check span { justify-content: flex-start; text-align: left; line-height: 1.35; }

.diag-jauge {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}

.diag-jauge-barre {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #6B84FF, var(--accent));
  transition: width 0.35s var(--smooth);
}

.diag-chantiers {
  list-style: none;
  counter-reset: chantier;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.diag-chantiers li {
  counter-increment: chantier;
  position: relative;
  padding-left: 1.85rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--steel);
}

.diag-chantiers li::before {
  content: counter(chantier);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

.diag-chantier-q {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.diag-chantiers:empty { display: none; }

/* ─── Benchmarks ─── */
.bench-avert {
  background: rgba(194, 65, 12, 0.045);
  border-color: rgba(194, 65, 12, 0.22);
}

.bench-avert-titre {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9A3412;
  margin: 0 0 0.75rem;
}

.bench-avert p { font-size: 0.875rem; line-height: 1.6; color: var(--steel); margin: 0 0 0.6rem; }
.bench-avert p:last-child { margin-bottom: 0; }
.bench-avert strong { color: var(--ink); font-weight: 600; }

.bench-avert ul {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.bench-avert li { font-size: 0.875rem; line-height: 1.55; color: var(--steel); }

.bench-methode {
  border-top: 1px solid rgba(194, 65, 12, 0.18);
  padding-top: 0.7rem;
  font-size: 0.8125rem !important;
  color: var(--slate) !important;
}

.bench-table td:first-child { min-width: 13rem; }
.bench-regie { display: block; font-weight: 600; color: var(--ink); }

.bench-note {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--slate);
  margin-top: 0.15rem;
}

.bench-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bench-table td:first-child { white-space: normal; }

/* ─── Positionnement sur la fourchette ─── */
.bench-positions { display: grid; gap: 1.1rem; }
.bench-positions:empty { display: none; }

.bench-pos { display: grid; gap: 0.4rem; }

.bench-pos-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8125rem;
  font-weight: 550;
  color: var(--ink);
}

.bench-pos-val { font-family: var(--font-mono); font-size: 0.875rem; }

.bench-axe {
  position: relative;
  height: 0.375rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hairline), rgba(79, 107, 255, 0.28));
}

.bench-curseur {
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(24, 24, 27, 0.25);
}

.bench-pos.is-dedans .bench-curseur { background: #15803D; }
.bench-pos.is-bas .bench-curseur { background: #15803D; }
.bench-pos.is-haut .bench-curseur { background: #C2410C; }

.bench-pos-pied {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--slate);
}

.bench-pos-etat { text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }
.bench-pos.is-dedans .bench-pos-etat { color: #15803D; }
.bench-pos.is-bas .bench-pos-etat { color: #15803D; }
.bench-pos.is-haut .bench-pos-etat { color: #C2410C; }

/* ─── Liste deroulante avec recherche ───
   Quatorze pastilles occupaient deux rangees et obligeaient a parcourir la
   liste des yeux. Un bouton qui ouvre et se filtre a la frappe demande un
   clic de plus mais trouve bien plus vite. */
.combo { position: relative; }

.combo-bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  text-align: left;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.75rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: border-color 0.25s var(--smooth), box-shadow 0.25s var(--smooth);
}

.combo-bouton:hover { border-color: rgba(79, 107, 255, 0.35); }

.combo-bouton:focus-visible,
.combo-bouton[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.14);
}

.combo-chevron {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  color: var(--slate);
  transition: transform 0.25s var(--smooth);
}

.combo-bouton[aria-expanded="true"] .combo-chevron { transform: rotate(180deg); }

.combo-panneau {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-deep);
  padding: 0.5rem;
  display: grid;
  gap: 0.4rem;
}

.combo-panneau[hidden] { display: none; }

.combo-recherche {
  width: 100%;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 0.6rem;
  padding: 0.45rem 0.65rem;
}

.combo-recherche:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 107, 255, 0.14);
}

.combo-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 15rem;
  overflow-y: auto;
  display: grid;
  gap: 0.1rem;
}

.combo-liste li {
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--steel);
  cursor: pointer;
  transition: background 0.15s var(--smooth), color 0.15s var(--smooth);
}

.combo-liste li:hover,
.combo-liste li.is-actif { background: var(--canvas); color: var(--ink); }

.combo-liste li[aria-selected="true"] {
  background: rgba(79, 107, 255, 0.1);
  color: var(--accent);
  font-weight: 550;
}

.combo-vide { font-size: 0.8125rem; color: var(--slate); padding: 0.45rem 0.6rem; margin: 0; }

/* En-tete du tableau de reperes : le selecteur et le coefficient cote a
   cote plutot qu'une carte entiere pour un seul champ. */
.bench-tete {
  display: grid;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: end;
}

.bench-tete .tool-hint { padding-bottom: 0.35rem; }

@media (max-width: 760px) {
  .bench-tete { grid-template-columns: 1fr; align-items: stretch; }
  .bench-tete .tool-hint { padding-bottom: 0; }
}