/* Complements a hub.css pour les pages Roblox Studio Tools.
   Fichier separe volontairement : hub.css sert aussi a AutoAdmin, on n'y touche pas. */
.hub-tool.device .hub-tool-top { background: linear-gradient(135deg,#2f5d63,#132430); }
.hub-tool.lattice .hub-tool-top { background: linear-gradient(135deg,#5a4a2f,#241c17); }
.hub-tool.enamel .hub-tool-top { background: linear-gradient(135deg,#3b3a63,#171626); }
.hub-tool.cornice .hub-tool-top { background: linear-gradient(135deg,#4a3c56,#1c1726); }
.hub-tool.aperture .hub-tool-top { background: linear-gradient(135deg,#2d4a5e,#131f2a); }
.hub-tool.runnel .hub-tool-top { background: linear-gradient(135deg,#2b5450,#111f21); }
.hub-tool.draught .hub-tool-top { background: linear-gradient(135deg,#26466b,#101a28); }
.hub-tool.stride .hub-tool-top { background: linear-gradient(135deg,#5a3a44,#211419); }
.hub-tool.topple .hub-tool-top { background: linear-gradient(135deg,#5c4630,#231a12); }
.hub-tool.warren .hub-tool-top { background: linear-gradient(135deg,#3f3352,#181425); }
.hub-tool.menagerie .hub-tool-top { background: linear-gradient(135deg,#4d5a2c,#1d2113); }
.hub-tool.newel .hub-tool-top { background: linear-gradient(135deg,#4a4038,#1e1a16); }
.hub-tool.ballast .hub-tool-top { background: linear-gradient(135deg,#55452f,#201a13); }
.hub-tool.bight .hub-tool-top { background: linear-gradient(135deg,#2b4d5d,#101d26); }
.hub-tool.gusset .hub-tool-top { background: linear-gradient(135deg,#5a3f2d,#211711); }
.hub-tool.cavea .hub-tool-top { background: linear-gradient(135deg,#3f4f68,#161d29); }
.hub-tool.gyre .hub-tool-top { background: linear-gradient(135deg,#385b58,#132321); }
.hub-tool.rafter .hub-tool-top { background: linear-gradient(135deg,#5b4037,#211713); }
.hub-tool.strut .hub-tool-top { background: linear-gradient(135deg,#465a64,#172127); }
.hub-tool.scarp .hub-tool-top { background: linear-gradient(135deg,#506a60,#1b2d38); }

/* Support dans la navigation. Sur mobile hub.css masque tous les liens du menu
   sauf la pilule AutoAdmin ; on garde Support visible, sinon la seule porte
   d'entree du support sur telephone serait le pied de page. */
.hub-nav .hub-nav-support { color: var(--hub-ink); }
.hub-nav .hub-nav-support:hover { color: var(--hub-cyan); }
@media (max-width: 620px) {
  .hub-nav a.hub-nav-support { display: inline-flex; font-size: 11px; }
}

.hub-support { display:flex; gap:clamp(1rem,4vw,2.5rem); align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:clamp(1.4rem,3vw,2rem) clamp(1.5rem,4vw,2.4rem); background:rgba(255,255,255,.025); }
.hub-support h2 { font-size:1.35rem; margin:0 0 .5rem; }
.hub-support p { margin:0; max-width:62ch; opacity:.7; line-height:1.65; font-size:.95rem; }
.hub-support .tool-support-link { flex:0 0 auto; }

.tool-cta { display:flex; flex-direction:column; gap:.55rem; }
.tool-detail-link { font-size:.85rem; letter-spacing:.02em; opacity:.75; text-decoration:none; color:inherit; border-bottom:1px solid currentColor; align-self:flex-start; padding-bottom:1px; }
.tool-detail-link:hover { opacity:1; }

.tool-page { padding-top:clamp(5rem,12vw,8rem); }
.tool-back { display:inline-block; margin-bottom:2rem; text-decoration:none; color:inherit; opacity:.7; font-size:.9rem; }
.tool-back:hover { opacity:1; }
.tool-head { display:flex; gap:clamp(1.5rem,4vw,3rem); align-items:flex-start; flex-wrap:wrap; margin-bottom:clamp(2.5rem,6vw,4rem); }
.tool-icon { width:132px; height:132px; border-radius:26px; flex:0 0 auto; box-shadow:0 18px 45px rgba(0,0,0,.45); }
.tool-head h1 { font-size:clamp(2.2rem,6vw,3.4rem); margin:.35rem 0 .75rem; }
.tool-head > div { flex:1 1 320px; min-width:0; }
.tool-buy { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin:1.5rem 0 1rem; }
.tool-price { font-size:1.9rem; font-weight:800; letter-spacing:-.02em; }
.tool-meta { font-size:.85rem; opacity:.6; margin:0; }

.tool-block { border-top:1px solid rgba(255,255,255,.09); padding:2rem 0; max-width:70ch; }
.tool-block h2 { font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; opacity:.65; margin:0 0 .85rem; }
.tool-block p { margin:0 0 .9rem; line-height:1.7; }
.tool-limits p { opacity:.82; }
.tool-release-notice { margin:0 0 .25rem; padding:1.3rem 1.45rem; border:1px solid rgba(255,190,82,.38); border-radius:18px; background:rgba(111,67,8,.22); }
.tool-release-notice h2 { color:#ffd48a; opacity:1; }
.tool-release-notice p { color:#fff2d5; opacity:.92; }
.tool-button-paused { cursor:not-allowed; opacity:.68; filter:saturate(.55); }
.tool-listing { font-size:.95rem; opacity:.75; line-height:1.75; white-space:normal; }
.tool-final { display:flex; gap:1rem; flex-wrap:wrap; padding:2.5rem 0 1rem; border-top:1px solid rgba(255,255,255,.09); }

.social-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.social-card { display:flex; flex-direction:column; gap:.3rem; padding:1.4rem 1.5rem; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); text-decoration:none; color:inherit; transition:transform .18s ease, border-color .18s ease; }
.social-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.26); }
.social-name { font-size:.72rem; text-transform:uppercase; letter-spacing:.11em; opacity:.6; }
.social-handle { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.social-note { font-size:.85rem; opacity:.62; }
.social-card.youtube:hover { border-color:rgba(255,90,90,.5); }
.social-card.tiktok:hover { border-color:rgba(105,235,225,.5); }
.social-card.instagram:hover { border-color:rgba(226,120,190,.5); }

/* Support : volontairement discret. Le bouton d'achat reste le seul element
   plein sur la page produit ; ce bloc est une note en bas, pas un second CTA. */
.tool-support { margin-top:2.5rem; padding:1.5rem 0 0; border-top:1px solid rgba(255,255,255,.09); max-width:70ch; }
.tool-support h2 { font-size:1rem; letter-spacing:.03em; margin:0 0 .5rem; opacity:.75; }
.tool-support p { margin:0 0 .9rem; font-size:.92rem; opacity:.7; line-height:1.6; }
.tool-support-link { display:inline-block; font-size:.9rem; text-decoration:none; color:inherit; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.5rem 1.1rem; transition:border-color .18s ease, opacity .18s ease; opacity:.85; }
.tool-support-link:hover { border-color:rgba(255,255,255,.5); opacity:1; }
.tool-support-more { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:1rem !important; font-size:.85rem; }
.tool-support-more a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:1px; }
.tool-support-more a:hover { border-bottom-color:currentColor; }

.support-wrap { max-width:44rem; }
.support-context { font-size:.9rem; opacity:.7; margin:0 0 1.5rem; }
.support-intro { opacity:.75; line-height:1.7; margin:0 0 2rem; }
.support-form { display:flex; flex-direction:column; gap:1.4rem; }
.support-field { display:flex; flex-direction:column; gap:.4rem; }
.support-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; opacity:.6; }
.support-label em { font-style:normal; text-transform:none; letter-spacing:0; opacity:.75; }
.support-form input, .support-form select, .support-form textarea {
  font:inherit; font-size:.95rem; color:inherit; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:.7rem .85rem; width:100%;
}
.support-form textarea { resize:vertical; min-height:9rem; line-height:1.6; }
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { outline:2px solid rgba(154,232,255,.55); outline-offset:1px; border-color:transparent; }
.support-form select option { background:#0b1622; color:#eaf2ff; }
.support-hint { font-size:.8rem; opacity:.55; line-height:1.5; }
.support-submit { align-self:flex-start; border:0; cursor:pointer; }
.support-submit[disabled] { opacity:.55; cursor:default; }
.support-status:empty { display:none; }
.support-status { font-size:.92rem; line-height:1.6; margin:0; }
.support-status.is-error { color:#ffb4b4; }
.support-status.is-done { color:#a9f0c0; }
.support-privacy { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.09); font-size:.82rem; opacity:.55; line-height:1.7; }
/* Champ piege : hors ecran plutot que display:none, que certains robots ignorent. */
.support-honey { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.support-title-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.support-title-row h1 { margin:0; }
.support-lang-toggle { min-width:46px; min-height:44px; padding:.55rem .75rem; border:1px solid rgba(97,222,253,.42); border-radius:999px; color:var(--hub-ink); background:rgba(255,255,255,.04); font:800 .78rem/1 Manrope,Arial,sans-serif; cursor:pointer; }
.support-lang-toggle:hover, .support-lang-toggle:focus-visible { border-color:var(--hub-cyan); color:var(--hub-cyan); outline:2px solid rgba(97,222,253,.35); outline-offset:2px; }

.guide-step { margin-bottom:1.4rem; }
.guide-step h3 { font-size:1rem; margin:0 0 .35rem; }
.guide-step p { margin:0; opacity:.8; }
.guide-table-wrap { overflow-x:auto; }
.guide-table { border-collapse:collapse; width:100%; font-size:.9rem; margin-bottom:1rem; min-width:34rem; }
.guide-table th, .guide-table td { text-align:left; padding:.55rem .8rem; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.guide-table th { font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; opacity:.6; }
.guide-table td:nth-child(2) { white-space:nowrap; opacity:.75; }
.guide-release { margin-bottom:1.2rem; }
.guide-release h3 { font-size:.95rem; margin:0 0 .3rem; }
.guide-release h3 span { font-weight:400; opacity:.5; font-size:.85rem; margin-left:.5rem; }
.guide-release p { margin:0; opacity:.78; }

@media (max-width:640px) {
  .tool-icon { width:96px; height:96px; border-radius:20px; }
  .tool-buy { gap:.9rem; }
  .tool-price { font-size:1.6rem; }
  .support-title-row { align-items:flex-start; }
}