/* ============================================================
   PAGE TÉLÉCHARGEMENTS
   ============================================================ */

/* ── Barre de recherche (bandeau jaune) ── */
.dl-search {
    background: var(--color-primary);
    padding: 18px 40px;
    margin-bottom: 60px;
}

.dl-search__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    max-width: var(--container-lg);
    margin: 0 auto;
}

.dl-search__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    color: var(--color-black);
    text-transform: uppercase;
}

.dl-search__form {
    display: flex;
    gap: 10px;
}

.dl-search__input {
    width: 280px;
    max-width: 60vw;
    height: 44px;
    padding: 0 14px;
    background: var(--color-white);
    border: none;
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: var(--text-base); /* 16px : lisible + évite le zoom iOS */
}

.dl-search__input::placeholder {
    color: #6b6b6b;
    opacity: 1;
}

.dl-search__btn {
    height: 44px;
    padding: 0 26px;
    background: var(--color-black);
    border: none;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.18s ease;
}

.dl-search__btn:hover { opacity: 0.85; }

/* ── Grille des sous-catégories ── */
.dl-cats {
    padding: 0 40px 80px;
}

.dl-cats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: var(--container-lg);
    margin-left: auto;
    margin-right: auto;
}

.dl-cats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    aspect-ratio: 16 / 10;
    padding: 24px;
    text-decoration: none;
    background: transparent;
}

.dl-cats__img {
    /* proportionnel à la carte → ne déborde jamais quelle que soit la largeur */
    max-height: 60%;
    max-width: 85%;
    width: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.dl-cats__item:hover .dl-cats__img { transform: scale(1.06); }

.dl-cats__name {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    text-transform: uppercase;
    text-align: center;
}

/* ── Grille des articles (cards image + titre) ── */
.dl-products {
    padding: 0 40px 80px;
}

.dl-products__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: var(--container-lg);
    margin: 0 auto;
}

.dl-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 9;
    padding: 18px;
    border: none;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    background: var(--color-bg-card) center / cover no-repeat;
}

.dl-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.1) 70%);
    transition: opacity 0.2s ease;
}

.dl-card:hover .dl-card__overlay { opacity: 0.6; }

.dl-card__name {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--fw-bold);
    color: var(--color-white);
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.dl-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 0 40px 80px;
}

/* ── Popup fichiers ── */
.popup_download {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s 0.25s;
}

.popup_download.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}

.popup_download .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.popup_download .download_content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-primary);
}

.product_download_files_wrapper {
    display: flex;
    align-items: stretch;
}

.product_download_thumb {
    width: 45%;
    object-fit: cover;
    flex-shrink: 0;
}

.product_download_files_wrapper .datas {
    flex: 1;
    padding: 28px;
}

.product_download_files_wrapper .title {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.product_download_files_wrapper .buttons .row { margin-bottom: 10px; }

.product_download_files_wrapper .buttons a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.18s ease;
}

.product_download_files_wrapper .buttons a:hover { color: var(--color-primary); }

.popup_download .download_content > .title.waiting,
.popup_download .download_content > .title {
    display: block;
    padding: 40px;
    text-align: center;
    color: var(--color-white);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .dl-cats__grid,
    .dl-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .dl-search { padding: 16px var(--gutter); margin-bottom: 36px; }
    .dl-search__inner { flex-direction: column; }

    /* Recherche : form pleine largeur, input flexible, bouton qui ne déborde plus */
    .dl-search__title { font-size: var(--text-base); text-align: center; }
    .dl-search__form { width: 100%; }
    .dl-search__input { flex: 1; width: auto; max-width: none; }
    .dl-search__btn { flex-shrink: 0; padding: 0 18px; white-space: nowrap; }
    .dl-cats,
    .dl-products,
    .dl-empty { padding: 0 var(--gutter) 50px; }

    /* Cartes catégories : 2 par ligne, hauteur auto (plus de chevauchement d'image) */
    .dl-cats__grid { gap: 12px; }
    .dl-cats__item {
        aspect-ratio: auto;
        min-height: 150px;
        gap: 10px;
        padding: 16px;
    }
    .dl-cats__img { max-height: 110px; }
    .dl-cats__name { font-size: var(--text-base); }

    .product_download_files_wrapper { flex-direction: column; }
    .product_download_thumb { width: 100%; height: 180px; }
}