﻿/**
 * Page Telecharger — grille symetrique (3 / 2 / 2), cartes hauteur egale.
 * Scope : .cdb-dl (pas body.*) pour rester valide apres nav AJAX.
 */

.cdb-dl {
    --cdb-dl-gap: 0.85rem;
    --cdb-dl-pad: 1rem 1.1rem;
    --cdb-dl-radius: 12px;
    color: var(--cdb-text, var(--cdb26-ink));
}

.cdb-dl__head {
    padding: 1.15rem 0 0.2rem;
}

.cdb-dl__head .cdb26-shell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    text-align: left;
}

.cdb-dl__head h1 {
    margin: 0;
    font-size: clamp(1.35rem, 4.5vw, 1.9rem);
    line-height: 1.2;
    text-align: left;
}

.cdb-dl__head .cdb-page-head__meta {
    margin: 0;
    max-width: 42rem;
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.92rem;
    line-height: 1.4;
}

.cdb-dl__flash {
    margin-bottom: 0.5rem;
}

.cdb-dl__section {
    padding: 0.55rem 0 1rem;
}

.cdb-dl__section--tone {
    padding-block: 0.9rem 1rem;
    background: color-mix(in srgb, var(--cdb-bg-elevated, var(--cdb26-surface)) 32%, transparent);
    border-block: 1px solid var(--cdb-border, var(--cdb26-line));
}

.cdb-dl__section-head {
    margin: 0 0 0.7rem;
    text-align: left;
}

.cdb-dl__section-head h2 {
    margin: 0 0 0.2rem;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.25;
}

.cdb-dl__section-head p {
    margin: 0;
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Grilles egales */
.cdb-dl__grid,
.cdb-dl__integrity,
.cdb-dl__footer-row {
    display: grid;
    width: 100%;
    gap: var(--cdb-dl-gap);
    align-items: stretch;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .cdb-dl__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cdb-dl__integrity,
    .cdb-dl__footer-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Meme chrome pour toutes les tuiles */
.cdb-dl__card,
.cdb-dl__panel,
.cdb-dl__help,
.cdb-dl__premium {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--cdb-dl-pad);
    border: 1px solid var(--cdb-border, var(--cdb26-line));
    border-radius: var(--cdb-dl-radius);
    background: color-mix(in srgb, var(--cdb-bg-elevated, var(--cdb26-surface)) 90%, transparent);
    text-align: left;
    box-sizing: border-box;
}

.cdb-dl__card--featured {
    border-color: color-mix(in srgb, var(--cdb-accent, #16878b) 42%, var(--cdb-border, var(--cdb26-line)));
}

.cdb-dl__card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.cdb-dl__card-head h3 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(0.9rem, 2.6vw, 1.05rem);
    line-height: 1.25;
}

.cdb-dl__card-head .cdb-dl__tag {
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

.cdb-dl__icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9px;
    color: var(--cdb-accent, #16878b);
    background: color-mix(in srgb, var(--cdb-accent, #16878b) 14%, transparent);
}

.cdb-dl__tag {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cdb-muted, var(--cdb26-muted));
}

.cdb-dl__card h3,
.cdb-dl__panel h3,
.cdb-dl__help h2,
.cdb-dl__premium h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.cdb-dl__text,
.cdb-dl__help > p,
.cdb-dl__premium > p {
    margin: 0;
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.88rem;
    line-height: 1.4;
    flex: 1 1 auto;
}

.cdb-dl__steps {
    margin: 0;
    padding: 0 0 0 1.05rem;
    color: var(--cdb-text, var(--cdb26-ink));
    font-size: 0.82rem;
    line-height: 1.35;
    flex: 1 1 auto;
}

.cdb-dl__steps li + li {
    margin-top: 0.2rem;
}

/* CTA collé en bas de carte (ligne basse commune sur les 3 colonnes). */
.cdb-dl__card > .cdb-dl__actions,
.cdb-dl__card > .cdb-dl__waitlist {
    margin-top: auto;
    padding-top: 0.85rem;
}

.cdb-dl__waitlist {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cdb-dl__waitlist-row {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

.cdb-dl__waitlist-row input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.45rem;
    padding: 0 0.75rem;
    border: 1px solid var(--cdb-outline, currentColor);
    border-radius: 0.55rem;
    background: var(--cdb-surface, transparent);
    color: inherit;
}

.cdb-dl__waitlist-row .cdb-btn {
    width: auto;
    flex: 0 0 auto;
    min-height: 2.45rem;
}

.cdb-dl__waitlist-consent {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    font-size: 0.82rem;
    line-height: 1.35;
}

.cdb-dl__waitlist-consent input {
    margin-top: 0.15rem;
}

.cdb-dl__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
}

.cdb-dl__actions--row {
    flex-direction: row;
    flex-wrap: wrap;
}

.cdb-dl__actions .cdb-btn {
    width: 100%;
    min-height: 2.45rem;
    justify-content: center;
}

/* Bouton principal toujours en dernier dans le bloc actions. */
.cdb-dl__card .cdb-dl__actions > .cdb-btn--cta,
.cdb-dl__card .cdb-dl__actions > .cdb-btn--primary {
    order: 5;
    margin-top: 0.15rem;
}

.cdb-dl__card .cdb-dl__actions > .cdb-dl__link,
.cdb-dl__card .cdb-dl__actions > .cdb-dl__soon,
.cdb-dl__card .cdb-dl__actions > .cdb-dl__meta,
.cdb-dl__card .cdb-dl__actions > .cdb-dl__muted {
    order: 1;
}

.cdb-dl__actions--row .cdb-btn {
    width: auto;
    flex: 1 1 9.5rem;
}

.cdb-dl__link {
    color: var(--cdb-accent, #16878b);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.cdb-dl__soon {
    display: inline-flex;
    align-self: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--cdb-border, var(--cdb26-line));
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.72rem;
    font-weight: 650;
}

.cdb-dl__meta,
.cdb-dl__muted {
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.78rem;
    text-align: center;
}

.cdb-dl__panel h4 {
    margin: 0.65rem 0 0.25rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cdb-muted, var(--cdb26-muted));
}

.cdb-dl__meta-list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
}

.cdb-dl__meta-list dt {
    margin: 0 0 0.1rem;
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cdb-dl__meta-list dd {
    margin: 0;
    font-size: 0.88rem;
    word-break: break-all;
}

.cdb-dl__meta-list code,
.cdb-dl__code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--cdb-border, var(--cdb26-line));
    background: color-mix(in srgb, #000 18%, var(--cdb-bg, var(--cdb26-bg)));
    color: var(--cdb-text, var(--cdb26-ink));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    line-height: 1.35;
    overflow-x: auto;
}

html[data-theme="light"] .cdb-dl__meta-list code,
html[data-theme="light"] .cdb-dl__code {
    background: #f3f6f8;
}

.cdb-dl__code {
    margin: 0;
}

.cdb-dl__note {
    margin: 0.5rem 0 0;
    color: var(--cdb-muted, var(--cdb26-muted));
    font-size: 0.82rem;
    line-height: 1.4;
}

.cdb-dl__premium .cdb-dl__tag {
    color: var(--cdb-mobile-amber, var(--c26-orange-strong, #e86f00));
}

.cdb-dl__help .cdb-dl__actions,
.cdb-dl__premium .cdb-btn {
    margin-top: auto;
}

.cdb-dl__premium > .cdb-btn {
    align-self: stretch;
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

.cdb-dl__install {
    display: grid;
    gap: var(--cdb-dl-gap);
    max-width: 44rem;
}

.cdb-dl__install h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
}
