/* Pages Catalogues (Views/Default/Download/Index.cshtml, tous les sites) et Documentation (Views/Poolex/Download/Documentation.cshtml).
   Couleurs et arrondis de la marque : classe dl-page--{thème}, même palette que product-search.css. */
.dl-page { --dl-main: #004a82; --dl-accent: #ed1b2f; --dl-soft: #f3f4f6; --dl-radius: 12px; --dl-pill: 999px; --dl-text: #2b2f33; --dl-muted: #6b7380; padding: 48px 0 72px; color: var(--dl-text); }
.dl-page--poolex { --dl-main: #005487; --dl-accent: #00bad3; --dl-soft: #f5f5f5; --dl-radius: 0; --dl-pill: 0; }
.dl-page--waterflex { --dl-main: #0168b4; --dl-accent: #00b8f1; --dl-soft: #f3f3f3; }
.dl-page--netspa { --dl-main: #002c52; --dl-accent: #b42e6c; --dl-soft: #f5f5f5; --dl-radius: 8px; --dl-pill: 8px; }
.dl-page--francesauna { --dl-main: #9b0070; --dl-accent: #5d0b58; --dl-soft: #f2f2f2; }
.dl-page--wattsup2 { --dl-main: #26769b; --dl-accent: #ff7500; --dl-soft: #f2f2f2; }

/* en-tête */
.dl-page .dl-head { margin-bottom: 28px; }
.dl-page .dl-title { margin: 0; font-size: 2.25rem; font-weight: 700; line-height: 1.2; color: var(--dl-main); letter-spacing: 0; text-transform: none; }
.dl-page .dl-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 14px; background: var(--dl-accent); border-radius: 2px; }
.dl-page .dl-subtitle { margin: 14px 0 0; font-size: 1.1rem; font-weight: 400; line-height: 1.5; color: var(--dl-muted); letter-spacing: 0; text-transform: none; }

/* barre d'outils : filtres de langue, recherche, compteur */
.dl-page .dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 32px; }
.dl-page .dl-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.dl-page .dl-filter { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1; color: var(--dl-main); background: #fff; border: 1px solid #d5dae0; border-radius: var(--dl-pill); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dl-page .dl-filter:hover { border-color: var(--dl-main); }
.dl-page .dl-filter:focus-visible { outline: 3px solid color-mix(in srgb, var(--dl-main) 30%, transparent); outline-offset: 2px; }
.dl-page .dl-filter.active { color: #fff; background: var(--dl-main); border-color: var(--dl-main); }
.dl-page .dl-filter img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.dl-page .dl-filter .dl-count { min-width: 22px; padding: 2px 6px; font-size: .75rem; text-align: center; color: var(--dl-main); background: var(--dl-soft); border-radius: 999px; }
.dl-page .dl-filter.active .dl-count { color: var(--dl-main); background: #fff; }
.dl-page .dl-search { position: relative; flex: 0 1 420px; margin: 0; }
.dl-page .dl-search svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--dl-muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.dl-page .dl-search input { width: 100%; height: 44px; padding: 0 14px 0 42px; font: inherit; font-size: .95rem; color: var(--dl-text); background: #fff; border: 1px solid #d5dae0; border-radius: var(--dl-pill); }
.dl-page .dl-search input:focus { outline: none; border-color: var(--dl-main); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dl-main) 15%, transparent); }
.dl-page .dl-total { font-size: .9rem; color: var(--dl-muted); }
.dl-page .dl-empty { padding: 40px 0; text-align: center; color: var(--dl-muted); }

/* grille de cartes */
.dl-page .dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.dl-page .dl-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid #e6e9ed; border-radius: var(--dl-radius); box-shadow: 0 1px 3px rgba(16, 24, 40, .06); transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; text-align: left; font: inherit; padding: 0; width: 100%; }
.dl-page .dl-card:hover, .dl-page .dl-card:focus-visible { color: inherit; text-decoration: none; transform: translateY(-4px); border-color: color-mix(in srgb, var(--dl-main) 35%, #e6e9ed); box-shadow: 0 14px 32px rgba(16, 24, 40, .12); }
.dl-page .dl-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--dl-main) 35%, transparent); outline-offset: 2px; }
.dl-page .dl-cover { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; padding: 24px; background: var(--dl-soft); }
.dl-page .dl-cover img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 24px rgba(16, 24, 40, .18); transition: transform .25s; }
.dl-page .dl-card:hover .dl-cover img { transform: scale(1.03); }
.dl-page .dl-cover--product { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid #eef0f3; }
.dl-page .dl-cover--product img { box-shadow: none; }
.dl-page .dl-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.dl-page .dl-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--dl-main); letter-spacing: 0; text-transform: none; }
.dl-page .dl-card-sub { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--dl-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dl-page .dl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.dl-page .dl-lang { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--dl-muted); }
.dl-page .dl-lang img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.dl-page .dl-action { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--dl-main); }
.dl-page .dl-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.dl-page .dl-card:hover .dl-action { color: var(--dl-accent); }
.dl-page .dl-card:hover .dl-action svg { transform: translateY(2px); }
.dl-page [hidden] { display: none !important; }

/* fenêtre « Documents » de la page Documentation */
.dl-modal .modal-content { border: 0; border-radius: var(--dl-radius, 12px); overflow: hidden; }
.dl-modal .modal-header { align-items: center; padding: 18px 24px; color: #fff; background: var(--dl-main, #005487); border: 0; }
.dl-modal .modal-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; }
.dl-modal .modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.dl-modal .modal-body { padding: 8px 24px 24px; }
.dl-modal .table { margin: 0; }
.dl-modal .table thead th { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7380; border-top: 0; border-bottom: 1px solid #e6e9ed; }
.dl-modal .table td { vertical-align: middle; border-top: 1px solid #eef0f3; }
.dl-modal .table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.dl-modal .table td a:not(.primary-btn) { font-weight: 600; color: var(--dl-main, #005487); }
.dl-modal .table td img { border-radius: 50%; }
.dl-modal .primary-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; font-size: .85rem; font-weight: 700; color: #fff; text-decoration: none; background: var(--dl-main, #005487); border-radius: var(--dl-pill, 0); white-space: nowrap; }
.dl-modal .primary-btn:hover { color: #fff; background: var(--dl-accent, #00bad3); }

@media (max-width: 767px) {
    .dl-page { padding: 28px 0 48px; }
    .dl-page .dl-title { font-size: 1.75rem; }
    .dl-page .dl-search { flex: 1 1 100%; }
    .dl-page .dl-filter { height: 36px; padding: 0 12px; font-size: .85rem; }
    .dl-page .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .dl-page .dl-cover { padding: 14px; }
    .dl-page .dl-body { padding: 12px 14px 14px; }
    .dl-page .dl-card-title { font-size: .95rem; }
    .dl-page .dl-meta { flex-direction: column; align-items: flex-start; }
}