/* /public/assets/vitrine/pages/outils.css */
.vitrine .tools-page{ padding: calc(var(--header-height, 80px) + 32px) 0 64px; color: var(--color-text, #172033); }
.vitrine .tools-page h1{ margin: 0 0 32px; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.035em; }
.vitrine .tools-page .tool-category + .tool-category{ margin-top: 36px; }
.vitrine .tools-page .tool-category h2{ margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: var(--color-text-muted, #687083); }
.vitrine .tools-page .tool-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vitrine .tools-page .tool-tile{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 146px; padding: 22px 12px; border: 1px solid var(--color-border, #e4e7ec); border-radius: 16px; background: var(--color-bg-card, var(--color-bg, #fff)); color: var(--color-text, #172033); text-decoration: none; text-align: center; transition: border-color .18s, background-color .18s, transform .18s; }
.vitrine .tools-page .tool-tile__icon{ display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; background: color-mix(in srgb,var(--red) 8%,transparent); color: var(--color-primary, var(--red)); }
.vitrine .tools-page .tool-tile__icon svg{ display: block; width: 30px; height: 30px; }
.vitrine .tools-page .tool-tile__label{ font-size: .95rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.vitrine .tools-page .tool-tile:hover{ border-color: var(--color-primary, var(--red)); transform: translateY(-2px); }
.vitrine .tools-page .tool-tile:focus-visible{ outline: 3px solid var(--color-primary, var(--red)); outline-offset: 4px; }
html[data-theme="dark"] .vitrine .tools-page .tool-tile__icon{ background: color-mix(in srgb,var(--red) 16%,transparent); }
@media (max-width: 700px) {.vitrine .tools-page{ padding-top: calc(var(--header-height, 80px) + 24px); padding-bottom: 40px; }
.vitrine .tools-page h1{ margin-bottom: 24px; }
.vitrine .tools-page .tool-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vitrine .tools-page .tool-tile{ min-height: 138px; padding: 18px 10px; }}
@media (prefers-reduced-motion: reduce) {.vitrine .tools-page .tool-tile{ transition: none; }
.vitrine .tools-page .tool-tile:hover{ transform: none; }}