/* Outils gratuits (/outils/) : générateur de QR code, vérificateur de lien, constructeur UTM.
   Feuille propre aux outils. Variables de qlynk.css uniquement : thème clair et sombre, aucune couleur en dur
   (sauf la couleur du motif et du fond du QR code, choisies par le visiteur), ni dégradé. */

.tool-page { display: grid; gap: clamp(24px, 4vw, 40px); }
.tool-page > * { min-width: 0; }
.tool-page .page-head-public { margin-bottom: 0; }

/* Réponse directe sous le titre */
.tool-answer { max-width: 62ch; padding: 14px 18px; border-left: 3px solid var(--accent-line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--accent-soft); color: var(--ink); font-size: 1.05rem; }

/* Cadre de l'outil */
.tool { padding: clamp(18px, 3.2vw, 32px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.tool-grid > * { min-width: 0; }
@media (max-width: 820px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.tool-form, .tool-out { display: grid; gap: 18px; align-content: start; }
.tool-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 480px) { .tool-two { grid-template-columns: minmax(0, 1fr); } }
.tool-sub { font: 700 1.05rem/1.2 var(--font-display); }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-actions .btn { min-height: 44px; }
.tool .req { color: var(--danger); }
.tool .opt { font-weight: 500; color: var(--ink-3); }
.tool textarea.input { resize: vertical; min-height: 84px; }
.tool select.input { cursor: pointer; }
.tool .select-wrap { position: relative; }
.tool .select-wrap .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); }
.tool .select-wrap select { appearance: none; padding-right: 36px; }
.param { margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink-3); font: 600 0.75rem/1.4 var(--font-ui); letter-spacing: 0.01em; }
.tool .input { min-height: 44px; }

/* Générateur de QR code */
.color-field { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.color-field input[type="color"] { width: 52px; height: 44px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); cursor: pointer; }
.color-field input[type="color"]:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--focus-soft); }
.color-field code { font-size: 0.85rem; padding: 2px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); }
.contrast { min-height: 1.4em; font-size: 0.9rem; color: var(--ink-2); }
.contrast.is-bad, .contrast.is-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.contrast.is-ok { color: var(--ok); font-weight: 600; }
.qr-stage { display: grid; place-items: center; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.qr-stage.has-qr { border-style: solid; border-color: var(--line-strong); padding: 0; }
.qr-stage svg.qr { display: block; width: 100%; height: 100%; }
.qr-empty { display: grid; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--ink-3); font-size: 0.95rem; }
.qr-empty .ic { width: 36px; height: 36px; }
.tool-out > .tool-actions { justify-content: center; }
.tool-out > .hint { text-align: center; font-size: 0.85rem; color: var(--ink-3); }

/* Constructeur UTM */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 0.85rem/1 var(--font-ui); cursor: pointer; transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), background var(--fast) var(--ease-out); }
.chip:hover { border-color: var(--accent-line); color: var(--accent-text); }
.chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-soft); border-color: var(--accent-line); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.utm-result { display: block; min-height: 120px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; word-break: break-word; color: var(--ink); }
.utm-result .utm-empty { color: var(--ink-3); }
.utm-result .p-base { color: var(--ink); }
.utm-result .p-key { color: var(--accent-text); font-weight: 700; }
.utm-result .p-val { color: var(--ink); }
.utm-result .p-sep { color: var(--ink-3); }
.tool-explain { display: grid; gap: 14px; max-width: 72ch; }
.tool-explain h2, .tool-faq h2, .check-result h2 { font: 800 1.45rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.tool-explain dl { display: grid; gap: 12px; }
.tool-explain dt { font-weight: 700; color: var(--ink); font-family: var(--font-ui); }
.tool-explain dd { margin: 2px 0 0; color: var(--ink-2); }
.tool-explain i { font-style: normal; font-weight: 600; color: var(--ink); }

/* Vérificateur de lien */
.check-row { display: flex; gap: 10px; }
.check-row .input { flex: 1; min-width: 0; }
.check-row .btn { flex: none; min-height: 44px; }
@media (max-width: 520px) { .check-row { flex-direction: column; } .check-row .btn { width: 100%; justify-content: center; } }
.check-result { display: grid; gap: 16px; }
.check-result h3 { font: 700 1.05rem/1.2 var(--font-display); margin-top: 6px; }
.final-card { display: grid; gap: 10px; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.final-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--ink-3); }
.final-url { font: 700 1.15rem/1.35 var(--font-display); color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.final-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.final-meta .tag { gap: 6px; align-items: center; }
.final-meta .tag .ic { width: 14px; height: 14px; }
.final-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.final-actions .btn { min-height: 40px; }
.warn-list { display: grid; gap: 10px; }
.status.info { background: var(--surface-2); color: var(--ink-2); }
.hops { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.hops li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; }
.hops li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line-strong); }
.hop-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 0.9rem; }
.hop-body { display: grid; gap: 6px; min-width: 0; }
.hop-url { overflow-wrap: anywhere; word-break: break-word; color: var(--ink); font-weight: 600; }
.hop-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hop-host { font-size: 0.85rem; color: var(--ink-3); overflow-wrap: anywhere; }
.hop-note { font-size: 0.9rem; color: var(--ink-2); }
.check-form .hint { color: var(--ink-3); }
[data-check-form][aria-busy="true"] .btn { opacity: 0.7; }

/* Encart Qlynk et questions fréquentes */
.tool-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); }
.tool-cta .ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
.tool-cta p { flex: 1 1 260px; color: var(--ink-2); }
.tool-cta p b { color: var(--ink); }
.tool-cta .btn { min-height: 44px; }
.tool-faq { display: grid; max-width: 760px; }
.tool-faq h2 { margin-bottom: 8px; }
.tool-faq details { border-bottom: 1px solid var(--line-strong); }
.tool-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 8px 0; cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; }
.tool-faq summary::-webkit-details-marker { display: none; }
.tool-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tool-faq summary .ic { flex: none; color: var(--ink-3); transition: transform var(--mid) var(--ease-out); }
.tool-faq details[open] summary .ic { transform: rotate(45deg); color: var(--accent-text); }
.tool-faq details p { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }

/* Page d'accueil des outils */
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .tools-grid { grid-template-columns: minmax(0, 1fr); } }
.tool-card { display: grid; gap: 12px; align-content: start; padding: clamp(18px, 3vw, 26px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; transition: border-color var(--mid) var(--ease-out), transform var(--mid) var(--ease-out); }
.tool-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.tool-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tool-card .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.tool-card h2 { font: 800 1.25rem/1.2 var(--font-display); letter-spacing: -0.02em; }
.tool-card p { color: var(--ink-2); }
.tool-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-text); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tool-card, .tool-card:hover { transition: none; transform: none; } }

/* Skill Claude (/outils/skill-claude/) */
.skill-get { display: grid; gap: 18px; align-content: start; }
.skill-meta { color: var(--ink-3); font-size: 0.88rem; }
.skill-chat { display: grid; gap: 14px; }
.chat-pair { display: grid; gap: 6px; }
.chat-user { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--accent-soft); color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.chat-claude { justify-self: start; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 94%; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 14px 14px 14px 4px; background: var(--surface-2); color: var(--ink-2); overflow-wrap: anywhere; }
.chat-claude b { color: var(--ink); }
.chat-claude .ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--surface); color: var(--accent-text); }
.chat-claude .ico .ic { width: 16px; height: 16px; }
.js .skill-chat[data-reveal] .chat-user, .js .skill-chat[data-reveal] .chat-claude { opacity: 0; transform: translateY(8px); }
.js .skill-chat[data-reveal].is-on .chat-user { animation: chatIn 420ms var(--ease-expo) both; animation-delay: calc(var(--i) * 520ms); }
.js .skill-chat[data-reveal].is-on .chat-claude { animation: chatIn 420ms var(--ease-expo) both; animation-delay: calc(var(--i) * 520ms + 260ms); }
.js .skill-chat[data-reveal].is-static .chat-user, .js .skill-chat[data-reveal].is-static .chat-claude { opacity: 1; transform: none; animation: none; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.skill-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
.skill-paths > * { min-width: 0; }
@media (max-width: 860px) { .skill-paths { grid-template-columns: minmax(0, 1fr); } }
.skill-path { display: grid; gap: 14px; }
.skill-path h3 { display: flex; align-items: center; gap: 10px; font: 700 1.1rem/1.25 var(--font-display); }
.skill-path h3 .ic { flex: none; color: var(--accent-text); }
.skill-path code, .skill-page .tool-explain p code { padding: 1px 6px; border-radius: 5px; background: var(--surface-2); color: var(--ink); font-size: 0.88em; overflow-wrap: anywhere; }
.skill-page #installer { max-width: none; }
.skill-page #installer > p { max-width: 72ch; }
.step-body { display: grid; gap: 10px; min-width: 0; }
.code-box { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 10px 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); }
.code-box pre { margin: 0; overflow-x: auto; padding: 6px 0; }
.code-box pre code { padding: 0; background: none; font: 500 0.85rem/1.5 var(--font-code, monospace); color: var(--ink); white-space: pre; }
.code-box .icon-btn { width: 40px; height: 40px; }
@media (prefers-reduced-motion: reduce) {
  .js .skill-chat[data-reveal] .chat-user, .js .skill-chat[data-reveal] .chat-claude { opacity: 1; transform: none; animation: none; }
}

/* Générateur de lien WhatsApp : le lien produit se lit comme l'adresse UTM, et le QR est un peu plus petit */
[data-wa-tool] .qr-stage { max-width: 260px; }
.tool-out > .tool-sub + .qr-stage, .tool-out > .qr-stage { margin-inline: auto; }