/* Accueil — section des 8 profils ("Pourquoi investir comme tout le monde alors que tu es unique ?")
   Mesures du rendu desktop (1440 px). */

.kp-section {
  --kp-ease: cubic-bezier(.22, 1, .36, 1);
  order: 16; /* position dans la page */
  align-self: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  min-width: 300px;
  padding: 50px 25px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  font-family: var(--font_default);
}
.kp-title { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.4; color: var(--color_primary_default); text-align: center; text-wrap: balance; }
.kp-accent { color: #ff7900; }
.kp-subtitle { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--color_text_default); text-align: center; }

/* Boutons */
.kp-actions { display: flex; flex-wrap: wrap; column-gap: 25px; }
.kp-btn {
  flex: 1 1 0; min-width: 320px; height: 44px; margin: 25px 0; box-sizing: border-box; /* même largeur pour les deux boutons */
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 99px; font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.kp-btn--outline { border: 1px solid var(--color_primary_default); color: var(--color_primary_default); padding: 0 20px; }
.kp-btn--outline:hover { background: var(--color_primary_default); color: var(--color_primary_contrast_default); }
.kp-btn--outline:active { background: rgba(0, 12, 102, 1); color: var(--color_primary_contrast_default); }
.kp-btn--filled { background: var(--color_primary_default); color: var(--color_primary_contrast_default); padding: 0 20px; border: 1px solid transparent; }
.kp-btn--filled:hover { background: rgba(0, 12, 102, 1); }
.kp-btn-icon { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; }

/* Grille : 2 rangées de 4 cartes */
.kp-grid { display: flex; flex-direction: column; row-gap: 10px; }
.kp-row { display: flex; justify-content: space-between; width: 100%; }

.kp-card {
  position: relative; box-sizing: border-box; flex: 0 0 auto;
  width: 24.5%; height: 320px; padding: 25px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--kp-bg); border: 1px solid rgb(153, 153, 153); border-radius: 30px;
  color: var(--color_text_default); text-decoration: none;
  transition: width .55s var(--kp-ease), opacity .45s ease, transform .45s var(--kp-ease), box-shadow .45s ease;
}
.kp-row.is-active-row .kp-card { width: 19.5%; }
.kp-row.is-active-row .kp-card.is-active { width: 39.5%; }

/* Estompage : le Capitaine Dévoué quand il n'est plus ouvert, la 1re rangée quand une carte de la 2e est ouverte */
.kp-card[data-kp-card="bTHzb"]:not(.is-active),
.kp-grid[data-active-row="2"] .kp-row[data-kp-row="1"] .kp-card { opacity: .5; }

.kp-name {
  margin: 0; height: 36px; flex-shrink: 0;
  font-size: 22px; font-weight: 300; line-height: 1.4; color: var(--color_text_default);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-wrap: nowrap !important; /* une règle globale force text-wrap: balance sur les titres */
}

.kp-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 25px; flex-shrink: 0; }
/* ordinateur : une seule ligne de hauteur fixe, pour que la photo ne bouge pas pendant l'ouverture de la carte */
@media (min-width: 1024px) {
  .kp-tags { flex-wrap: nowrap; height: 25px; overflow: hidden; }
  .kp-card { overflow: hidden; }
  /* La description a dès le départ sa largeur finale (carte ouverte = 39,5 % de la rangée, moins marges, photo et espace)
     et ne participe pas au placement de la photo : ses lignes ne changent plus pendant l'ouverture. */
  .kp-row { container-type: inline-size; }
  .kp-body { position: relative; }
  .kp-desc { position: absolute; top: 50%; translate: 0 -50%; width: calc(39.5cqw - 230px); flex: none; }
  .kp-body:not(.kp-body--image-first) .kp-desc { left: 0; }
  .kp-card.is-active .kp-body:not(.kp-body--image-first) .kp-img { margin-left: auto; }
  .kp-body--image-first .kp-desc { left: 178px; }
  .kp-img { z-index: 1; }
}
.kp-icons, .kp-chips { display: contents; }
.kp-icon {
  box-sizing: border-box; width: 25px; height: 25px; padding: 5px; border-radius: 99px;
  background: var(--kp-color); display: flex;
}
.kp-icon { color: var(--kp-on-color); }
/* certains pictos (Phosphor, Bootstrap) utilisent currentColor : la couleur doit être portée par le conteneur */
.kp-icon svg { width: 100%; height: 100%; fill: currentColor; color: inherit; }
.kp-chip {
  display: none; align-items: center; justify-content: center; box-sizing: border-box; min-height: 25px; padding: 2px 10px; border-radius: 99px;
  background: var(--kp-color); color: var(--kp-on-color); font-size: 14px; font-weight: 300; line-height: 1.4; white-space: nowrap;
}

.kp-body { display: flex; align-items: flex-start; flex-shrink: 0; column-gap: 28px; width: 100%; }
.kp-body--image-first .kp-img { order: -1; }
.kp-desc {
  display: none; margin: 0; flex: 1 1 0; min-width: 0; align-self: center; max-height: 187.5px; overflow: hidden;
  font-size: 16px; font-weight: 300; line-height: 1.4; color: var(--color_text_default); text-align: right;
}
.kp-body--image-first .kp-desc { text-align: left; }
.kp-img { position: relative; display: block; flex: 0 0 150px; width: 150px; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.kp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--kp-ease); transform-origin: 50% 50%; }

/* Carte ouverte : étiquettes en couleur + description à la place des pictos */
.kp-card.is-active .kp-icon { display: none; }
.kp-card.is-active .kp-chip { display: inline-flex; flex-shrink: 0; animation: kp-in-chip .45s var(--kp-ease) both; }
.kp-card.is-active .kp-chip:nth-child(2) { animation-delay: .05s; }
.kp-card.is-active .kp-chip:nth-child(3) { animation-delay: .1s; }
.kp-card.is-active .kp-desc { display: block; animation: kp-in-text .4s var(--kp-ease) .18s both; }
.kp-card:not(.is-active) .kp-icon { animation: kp-in .4s var(--kp-ease) both; }

/* Survol (souris) : légère élévation et zoom de l'illustration */
@media (hover: hover) and (pointer: fine) {
  /* pas de déplacement vertical au survol : seulement une ombre et un zoom léger centré dans le cadre */
  .kp-card:hover { box-shadow: 0 18px 40px rgba(0, 20, 168, .12); z-index: 2; }
  .kp-card:hover .kp-img img { transform: scale(1.04); }
}
.kp-card:focus-visible { outline: 2px solid var(--color_primary_default); outline-offset: 3px; }

@keyframes kp-in-chip { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes kp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes kp-in-text { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.kp-tagline { margin: 50px auto; max-width: 80%; font-size: 36px; font-weight: 600; line-height: 1.4; color: var(--color_bTGzp_default); text-align: center; text-wrap: balance; }
.kp-accent-blue { color: #0014A8; }

/* ---------- Tablette : grille de 2 colonnes, chaque carte affiche tout son contenu ---------- */
@media (max-width: 1023px) {
  .kp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .kp-row { display: contents; }
  .kp-card, .kp-row.is-active-row .kp-card, .kp-row.is-active-row .kp-card.is-active { width: auto; height: auto; gap: 14px; opacity: 1 !important; }
  .kp-name { height: auto; white-space: normal; text-wrap: balance !important; }
  .kp-card .kp-icon { display: none; }
  .kp-card .kp-chip { display: inline-flex; animation: none; }
  .kp-card .kp-desc { display: block; animation: none; }
  .kp-card .kp-body, .kp-card.is-active .kp-body { min-width: 0; margin-top: auto; column-gap: 24px; }
  .kp-img { flex-basis: 120px; width: 120px; }
  .kp-desc { font-size: 15px; }
  .kp-title { font-size: 32px; }
  .kp-tagline { font-size: 30px; max-width: 90%; }
}

/* ---------- Téléphone : une colonne ---------- */
@media (max-width: 768px) {
  .kp-section { padding: 40px 20px; }
  .kp-title { font-size: 26px; }
  .kp-subtitle { font-size: 18px; }
  .kp-actions { flex-direction: column; margin: 15px 0; row-gap: 12px; }
  .kp-btn { flex: none; width: 100%; min-width: 0; margin: 0; padding: 0 20px; }
  .kp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kp-card { padding: 20px; border-radius: 24px; }
  .kp-name { font-size: 20px; }
  .kp-img { flex-basis: 110px; width: 110px; }
  .kp-tagline { font-size: 24px; margin: 30px auto; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .kp-card, .kp-img img { transition: none; }
  .kp-card * { animation: none !important; }
}