/* Page « Nos marques » : tuiles blanches homogènes, logo contenu dans une zone fixe */
.brands-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.brands-count { margin: 0; color: var(--muted); font-size: .9rem; }
.brands-count strong { color: var(--teal); }
.brands-search { display: flex; align-items: center; gap: 8px; width: min(100%, 340px); padding: 0 16px; height: 46px; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--teal); box-shadow: var(--shadow); }
.brands-search:focus-within { border-color: var(--teal); }
.brands-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink, #1f3b40); }
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.brand-grid > li[hidden] { display: none; }
.brand-tile { position: relative; display: flex; align-items: center; gap: 16px; flex-direction: column; height: 100%; padding: 22px 20px 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.brand-tile:hover { transform: translateY(-4px); border-color: var(--amber, #fbbf2c); box-shadow: 0 14px 30px rgba(13, 85, 96, .12); }
.brand-logo { display: grid; place-items: center; width: 100%; height: 92px; padding-bottom: 16px; border-bottom: 1px dashed var(--line); overflow: hidden; }
.brand-logo img { display: block; max-width: 78%; max-height: 76px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .25s, opacity .25s, transform .25s; }
a.brand-tile:hover .brand-logo img { filter: none; opacity: 1; transform: scale(1.05); }
.brand-initial { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--amber-soft, #fde9a8); color: var(--deep, #0d5560); font-size: 1.8rem; font-weight: 800; }
.brand-info { display: grid; gap: 2px; justify-items: center; }
.brand-info .brand-name { font-size: 1.1rem; font-weight: 700; color: var(--deep, #0d5560); }
.brand-info small { color: var(--muted); font-size: .8rem; }
.brand-go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; transition: transform .2s, background .2s; }
a.brand-tile:hover .brand-go { background: var(--amber, #fbbf2c); color: #3a2a00; transform: translateX(3px); }
.brand-tile.is-soon { background: #fbfcfc; box-shadow: none; }
.brand-tile.is-soon .brand-name { color: var(--muted); }
.brands-empty { text-align: center; color: var(--muted); padding: 40px 0; }
@media (max-width: 1100px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .brand-tile { padding: 16px 12px; gap: 12px; } .brand-logo { height: 76px; padding-bottom: 12px; } .brand-logo img { max-height: 56px; } .brand-info .brand-name { font-size: 1rem; } }
@media (max-width: 420px) { .brands-search { width: 100%; } }
.brands-clear { color: var(--muted); font-size: 1.3rem; line-height: 1; text-decoration: none; }
.brands-clear:hover { color: var(--teal); }