/* ===== Section Valeurs (fond bleu, version épurée) ===== */
.values--dark{
  background: var(--blue);
  color:#fff;
  padding: 80px 0;
}

/* Grille principale */
.values-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr; /* liste à gauche, portrait à droite */
  gap: 36px;
  align-items:start;
}

/* En-tête sur 2 colonnes (titre + texte) */
.values-header{
  grid-column: 1 / -1;
  margin-bottom: 8px;
}
.values-header h2{
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 10px;
  color:#fff;
}
.values-header h2 span{ color: var(--orange); }
.values-header .lead{
  font-size: 1.05rem;
  color:#eaf2ff;
  margin: 0;
  max-width: 90ch;
}

/* Liste épurée (gauche) */
.values-list-wrap{ grid-column: 1 / 2; }
.values-list{
  list-style:none; margin: 8px 0 0; padding:0;
  display:flex; flex-direction:column; gap: 18px; /* espace aéré entre lignes */
}
.value-row{
  display:grid; grid-template-columns: 16px 1fr; gap: 14px;
  align-items:start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.value-row:last-child{ border-bottom: none; }
.dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--orange); margin-top: 8px;
}
.value-row h3{
  margin: 0 0 4px; font-size: 1.05rem; color:#fff;
}
.value-row p{
  margin: 0; color:#cfe1ff; line-height: 1.55; font-size: .96rem;
}

/* Portrait réduit (droite) */
.values-portrait{ grid-column: 2 / 3; text-align:center; }
.portrait-wrap{
  max-width: 360px; /* <<< portrait réduit */
  margin: 0 auto;
  border-radius: 16px; overflow:hidden;
  background:#fff;
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
}
.portrait-wrap img{
  display:block; width:100%; height:auto; object-fit:cover;
  transform: translateZ(0);
  transition: transform .45s ease;
}
.portrait-wrap:hover img{ transform: scale(1.03); }
.portrait-caption{ margin-top:10px; color:#cfe1ff; font-size:.9rem }

/* Responsive */
@media (max-width: 1024px){
  .values-grid{ grid-template-columns: 1fr; }
  .values-portrait{ grid-column: 1 / -1; order: 2; }
  .values-list-wrap{ order: 1; }
  .portrait-wrap{ max-width: 280px; } /* encore plus compact sur mobile */
}
