/* ============================================
   TRIKROMI — Page Design graphique
   Réutilise direction-artistique.css (template commun).
   Spécificité : /Approche = bloc 2 colonnes (texte + "Pour qui ?").
   Positions calées sur Figma : gauche x=391 (w521), droite x=1152 (w416).
   ============================================ */

.dg-approche {
  display: flex;
  align-items: flex-start;
  margin-top: clamp(24px, 2.6vw, 50px);
}

/* Colonne gauche : Figma x=391 (19% du conteneur), largeur 521 (28%) */
.dg-approche__left {
  margin-left: 19%;
  width: 28%;
}

/* Colonne droite : Figma x=1152 (60.5%), largeur 416 (23%) */
.dg-approche__right {
  margin-left: 13.5%;
  width: 23%;
}

/* "Pour qui ?" — Figma : Inter Semi Bold 30px, gris #595959 */
.dg-pourqui-title {
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.1;
  color: #595959;
  margin-bottom: 10px;
}

/* Réponse — Figma : Inter Regular 19px, gris #595959, line-height 1.38 */
.dg-pourqui-text {
  font-size: clamp(13px, 1vw, 19px);
  line-height: 1.38;
  letter-spacing: -0.06em;
  color: #595959;
}

/* Responsive : empilé sur mobile */
@media (max-width: 760px) {
  .dg-approche {
    flex-direction: column;
    gap: 28px;
  }
  .dg-approche__left,
  .dg-approche__right {
    margin-left: 0;
    width: 100%;
  }
}