/* ============================================================
   outils.css  ·  Tekio AI
   Styles partages des pages Outils (hub, outils sans IA, outils IA).
   Chargee APRES styles.css sur ces pages uniquement. N'utilise que les
   tokens du site (aucune couleur en dur hors #fff sur accent).
   ============================================================ */

.tool-wrap { max-width: 780px; margin: 0 auto; padding: 0 20px; }
.tool-wrap.is-wide { max-width: 920px; }

/* Encart confidentialite (memes reperes visuels que le scanner) */
.tool-priv { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-rose); border-radius: 14px; background: var(--bg-secondary); margin: 24px 0 8px; }
.tool-priv svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent-rose); }
.tool-priv p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
.tool-priv b { color: var(--text-primary); font-weight: 600; }

/* --- Formulaires d'outil --- */
.tool-form { margin: 22px 0 8px; display: flex; flex-direction: column; gap: 18px; }
.tool-field { display: flex; flex-direction: column; gap: 7px; }
.tool-field > label, .tool-label { font-family: "Geist", sans-serif; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.tool-field .hint { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.tool-field textarea, .tool-field input[type="text"], .tool-field input[type="number"], .tool-field select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text-primary);
  background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 12px 14px; transition: border-color .18s, box-shadow .18s; box-sizing: border-box;
}
.tool-field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.tool-field textarea.tall { min-height: 200px; }
.tool-field textarea:focus, .tool-field input:focus, .tool-field select:focus {
  outline: none; border-color: var(--accent-rose); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-rose) 18%, transparent);
}
.tool-row { display: flex; flex-wrap: wrap; gap: 16px; }
.tool-row .tool-field { flex: 1 1 200px; }

/* Groupe de choix facon pilules (ton d'email, format de resume...) */
.tool-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chips input { position: absolute; opacity: 0; pointer-events: none; }
.tool-chips label { cursor: pointer; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 999px; transition: background .18s, color .18s, border-color .18s; }
.tool-chips input:checked + label { background: var(--accent-rose); color: #fff; border-color: var(--accent-rose); }
.tool-chips input:focus-visible + label { outline: 2px solid var(--accent-rose); outline-offset: 2px; }

.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.tool-foot { font-size: 13px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.55; }
.btn.is-busy { opacity: .75; cursor: progress; }

/* --- Sortie des outils IA --- */
#result, .tool-output { margin-top: 24px; }
.oia-note { padding: 16px 18px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 14.5px; line-height: 1.6; }
.oia-note.oia-warn { border-left: 3px solid var(--accent-rose); }
.oia-note.oia-soon { border-left: 3px solid var(--accent-rose); }
.oia-gate { padding: 22px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-secondary); }
.oia-gate p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.6; }
.oia-result { border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-secondary); padding: 8px 22px 20px; box-shadow: var(--shadow-soft); }
.oia-md { color: var(--text-secondary); line-height: 1.65; font-size: 15px; }
.oia-md h3, .oia-md h4 { font-family: "Geist", sans-serif; color: var(--text-primary); margin: 22px 0 8px; font-size: 17px; }
.oia-md h3:first-child, .oia-md h4:first-child { margin-top: 14px; }
.oia-md p { margin: 0 0 12px; }
.oia-md ul, .oia-md ol { margin: 0 0 14px; padding-left: 22px; }
.oia-md li { margin: 4px 0; }
.oia-md strong { color: var(--text-primary); }
.oia-md code { font-family: "JetBrains Mono", monospace; font-size: 13px; background: var(--bg-tertiary, var(--bg-primary)); padding: 1px 5px; border-radius: 5px; }
.oia-actions { margin-top: 16px; }
.oia-remaining { font-size: 13px; color: var(--text-tertiary); margin: 12px 0 0; }

/* --- Grille du hub Outils --- */
.tools-section { margin: 40px 0; }
.tools-section > h2 { font-family: "Geist", sans-serif; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 6px; }
.tools-section > .sec-desc { color: var(--text-tertiary); font-size: 14.5px; margin: 0 0 20px; max-width: 640px; line-height: 1.55; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--bg-secondary); text-decoration: none; color: inherit; transition: border-color .18s, transform .18s, box-shadow .18s; position: relative; }
.tool-card:hover { border-color: var(--accent-rose); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.tool-card .tc-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in oklch, var(--accent-rose) 14%, transparent); color: var(--accent-rose); }
.tool-card .tc-ico svg { width: 21px; height: 21px; }
.tool-card h3 { font-family: "Geist", sans-serif; font-size: 16.5px; margin: 2px 0 0; color: var(--text-primary); }
.tool-card p { margin: 0; font-size: 13.5px; color: var(--text-tertiary); line-height: 1.55; }
.tool-card .tc-tag { position: absolute; top: 16px; right: 16px; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-tertiary); }
.tool-card.is-ia .tc-ico { background: color-mix(in oklch, var(--accent-rose) 20%, transparent); }
.tool-card .tc-open { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent-rose); display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 600px) { .tool-wrap { padding: 0 16px; } .tools-grid { grid-template-columns: 1fr; } }