/* =====================================================================
   decouvrir.html — l'outil en neuf écrans réels (16/09/2026)
   Page destinée aux campagnes de prospection : peu de mots, des captures.
   S'appuie sur style.css (variables, .hero, .grad, .chip, .cta-bande) ;
   seuls les blocs propres à la page vivent ici, préfixés dc-.
   ===================================================================== */
.dc-ecran { padding: 48px 0; }
.dc-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.dc-tete > div { display: grid; gap: 10px; }
.dc-tete h2 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.2; margin: 0; max-width: 24ch; text-wrap: balance; }
.dc-tete .grad, .dc-cote .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dc-lede { margin: 0; color: var(--muted); font-size: 17px; max-width: 52ch; }

.dc-capture { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: var(--shadow-lg); }
.dc-capture img { display: block; width: 100%; height: auto; }

.dc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.dc-duo figure { margin: 0; }
.dc-duo figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

.dc-pile { display: grid; gap: 18px; }
.dc-pile .dc-capture { border-radius: var(--r); }

.dc-cote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dc-cote.dc-avec-tel { grid-template-columns: minmax(0, 320px) 1fr; }
.dc-cote h2 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.2; margin: 0 0 24px; text-wrap: balance; }
.dc-doc { margin: 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 6px; box-shadow: var(--shadow-lg); overflow: hidden; }
.dc-doc img { display: block; width: 100%; height: auto; }
.dc-tel { border-radius: 38px; padding: 10px; background: var(--encre); box-shadow: var(--shadow-lg); max-width: 320px; margin-inline: auto; }
.dc-tel img { display: block; width: 100%; height: auto; border-radius: 29px; }

.dc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dc-points li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; }
.dc-points li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); flex: none; transform: translateY(-2px); }

.dc-pied { text-align: center; font-size: 13px; color: var(--muted); margin-top: 22px; }

@media (max-width: 760px) {
  .dc-duo, .dc-cote, .dc-cote.dc-avec-tel { grid-template-columns: 1fr; }
  .dc-ecran { padding: 36px 0; }
}