/* fAibrik — pages de téléchargement (livres blancs, cas clients) et listes de cartes Ressources.
   Gabarits : scripts/generate-pages/templates/telechargement.mjs et ressources-cartes.mjs.
   Les champs du formulaire réutilisent .dl-field / .dl-form-row / .dl-consent de main.css. */

/* ---- Listes de cartes (livres blancs, cas clients) ---- */
.res-grid--single { grid-template-columns: minmax(0, 520px); justify-content: center; }
.res-grid--duo { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
@media (max-width: 760px) { .res-grid--duo { grid-template-columns: minmax(0, 520px); } }
.res-card { color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.res-card:hover { color: inherit; transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(21,19,22,0.22); }
.res-card--full p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.res-card .thumb { overflow: hidden; background: var(--bg-b); }
.res-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.res-card .thumb.placeholder { display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; }
.res-tag--brand { background: var(--red-pale); color: var(--red-hover); }
.res-logo { display: block; height: 48px; width: auto; max-width: 180px; object-fit: contain; align-self: flex-start; margin-bottom: 2px; }
.res-card-detail { font-size: 13px !important; }
.res-card-cta { font-family: var(--font-title); font-weight: 700; font-size: 14px; color: var(--red); margin-top: 6px; }
.res-card:hover .res-card-cta { color: var(--red-hover); }

/* ---- Page de téléchargement ---- */
.dlp { position: relative; overflow: hidden; padding: 40px 32px 80px; background: radial-gradient(900px 460px at 15% -10%, rgba(206,22,25,0.12), transparent 60%), var(--bg-a); }
.dlp-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-title); font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 30px; }
.dlp-back:hover { color: var(--red); }
.dlp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.dlp-logo { display: block; height: 64px; width: auto; max-width: 220px; object-fit: contain; margin-bottom: 18px; }
.dlp-tag { font-family: var(--font-title); font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.dlp-title { font-size: clamp(28px, 3.2vw, 42px); font-weight: 900; line-height: 1.12; letter-spacing: -1.1px; margin: 0 0 18px; text-wrap: pretty; }
.dlp-text { margin: 0 0 28px; }
.dlp-text p { font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; text-wrap: pretty; }
.dlp-text h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: var(--black); margin: 24px 0 10px; }
.dlp-text ul { list-style: none; padding: 0; margin: 0 0 14px; }
.dlp-text li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--text-strong); line-height: 1.6; margin: 0 0 9px; }
.dlp-text li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-top: 9px; }
.dlp-text .dlp-chiffres li { font-family: var(--font-title); font-weight: 700; }
.dlp-visual { margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-b); }
.dlp-visual img { display: block; width: 100%; height: auto; }
.dlp-card { background: #fff; border: 1px solid var(--border); border-radius: 30px; box-shadow: 0 6px 18px -8px rgba(21,19,22,0.14); padding: 34px 36px 36px; }
.dlp-card h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.3; margin: 0 0 8px; }
.dlp-card-intro { font-size: 14.5px; line-height: 1.6; margin: 0 0 24px; }
.dlp-form .dl-field { margin-bottom: 14px; }
.dlp-form .dl-form-row .dl-field { margin-bottom: 0; }
.dlp-form .dl-field input { background: var(--bg-a); }
.dlp-submit { width: 100%; margin-top: 4px; }
.dlp-card .dl-modal-confirm .btn { display: inline-flex; }
@media (max-width: 860px) {
  .dlp-grid { grid-template-columns: 1fr; gap: 32px; }
  .dlp { padding-left: 20px; padding-right: 20px; }
  .dlp-card { padding: 28px 22px 30px; }
}