/* Page « Support » : formulaire de ticket (s'appuie sur compte.css pour les champs et les boutons) */
.narrow.wide { max-width: 560px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; text-align: left; }
.cats label { margin: 0; position: relative; display: block; }
.cats input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cats span { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid var(--b2); background: #080808; color: var(--t2); font-size: 14px; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.cats input:hover + span { color: var(--t1); border-color: var(--b3); }
.cats input:checked + span { background: #fff; color: #000; border-color: #fff; }
.cats input:focus-visible + span { box-shadow: 0 0 0 4px rgba(255, 255, 255, .2); }
.tip { min-height: 22px; margin: 0 0 18px; font-size: 13.5px; color: var(--t3); text-align: left; line-height: 1.55; }
.tip b { color: var(--t2); font-weight: 600; }
.two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.opt { color: var(--t3); font-weight: 400; margin-left: 4px; }
.field.area { height: auto; min-height: 150px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.count { text-align: right; color: var(--t3); font-size: 12.5px; margin: -6px 0 10px; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.alt { margin: 22px 0 0; color: var(--t3); font-size: 14px; }
.alt a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.alt a:hover { color: var(--t1); }
#done .lead b { color: var(--t1); }
@media (max-width: 520px) { .two { grid-template-columns: 1fr; gap: 0; } }