/*composant bouton*/

.dp-button {

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    padding: 13px 26px;
    min-height: 46px;
  
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
  
    color: var(--dp-color-text);
    text-decoration: none;
  
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
  
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.10) 0%,
        rgba(255,255,255,0.03) 38%,
        rgba(10,10,10,0.18) 100%
      );
  
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  
    box-shadow:
      0 10px 30px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(255,255,255,0.03);
  
    transition:
      transform .28s cubic-bezier(.22,1,.36,1),
      border-color .28s cubic-bezier(.22,1,.36,1),
      background .28s cubic-bezier(.22,1,.36,1),
      box-shadow .28s cubic-bezier(.22,1,.36,1);
  
  }
  
  
  /* highlight interne */
  
  .dp-button::before {
  
    content: "";
    position: absolute;
    inset: 1px;
  
    border-radius: inherit;
  
    background:
      radial-gradient(circle at 24% 16%, rgba(255,255,255,0.16), transparent 22%),
      linear-gradient(
        180deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0.01) 40%,
        rgba(255,255,255,0.00) 100%
      );
  
    pointer-events: none;
    z-index: -1;
  
  }
  
  
  /* reflet */
  
  .dp-button::after {
  
    content: "";
    position: absolute;
  
    left: 10%;
    top: 10%;
  
    width: 42%;
    height: 34%;
  
    border-radius: 999px;
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.14),
        rgba(255,255,255,0.01)
      );
  
    filter: blur(10px);
    opacity: .42;
  
    pointer-events: none;
    z-index: -1;
  
  }
  
  
  /* hover */
  
  .dp-button:hover {
  
    transform: translateY(-1px);
  
    border-color: rgba(255,255,255,0.30);
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.13) 0%,
        rgba(255,255,255,0.04) 40%,
        rgba(10,10,10,0.22) 100%
      );
  
    box-shadow:
      0 14px 36px rgba(0,0,0,0.26),
      inset 0 1px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(255,255,255,0.04);
  
  }
  
  
  .dp-button:active {
  
    transform: translateY(0);
  
  }
  
  
  /* bouton clair */
  
  .dp-button--light {
  
    color: #111;
  
    border-color: rgba(255,255,255,0.46);
  
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.68) 0%,
        rgba(255,255,255,0.42) 100%
      );
  
    box-shadow:
      0 10px 30px rgba(0,0,0,0.16),
      inset 0 1px 0 rgba(255,255,255,0.48),
      inset 0 -1px 0 rgba(255,255,255,0.10);
  
  }
  
  
  .dp-button--light::before {
  
    background:
      radial-gradient(circle at 24% 16%, rgba(255,255,255,0.34), transparent 22%),
      linear-gradient(
        180deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 100%
      );
  
  }

  /* composant card */

  /* =====================================================
DarkPads — Card Component
===================================================== */

.dp-card {

  position: relative;
  display: flex;
  flex-direction: column;

  min-width: 0;
  overflow: hidden;

  border-radius: var(--dp-radius-xl);
  border: 1px solid rgba(255,255,255,0.12);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 24%,
      rgba(12,12,12,0.52) 100%
    );

  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.03);

  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    border-color .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s cubic-bezier(.22,1,.36,1),
    background .28s cubic-bezier(.22,1,.36,1);

}


.dp-card::before {

  content: "";
  position: absolute;
  inset: 1px;

  border-radius: inherit;

  background:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,0.10), transparent 24%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.015) 30%,
      rgba(255,255,255,0.00) 100%
    );

  pointer-events: none;

}


.dp-card:hover {

  transform: translateY(-2px);

  border-color: rgba(255,255,255,0.18);

  box-shadow:
    0 28px 60px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04);

}


/* =====================================================
Card Media
===================================================== */

.dp-card__media {

  position: relative;
  overflow: hidden;

  aspect-ratio: 4 / 5;

  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 24%),
    linear-gradient(160deg,#191919 0%,#0c0c0c 100%);

  border-bottom: 1px solid rgba(255,255,255,0.08);

}


.dp-card__media img {

  width: 100%;
  height: 100%;
  object-fit: cover;

}


/* =====================================================
Card Body
===================================================== */

.dp-card__body {

  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  gap: var(--dp-space-200);

  padding: var(--dp-space-400);

}


/* =====================================================
Card Elements
===================================================== */

.dp-card__eyebrow {

  color: var(--dp-color-text-soft);

  font-size: var(--dp-text-xs);
  font-weight: 600;

  letter-spacing: 0.08em;
  text-transform: uppercase;

}


.dp-card__title {

  margin: 0;

  font-size: var(--dp-title-sm);
  line-height: 1.08;

  color: var(--dp-color-text);

}


.dp-card__text {

  margin: 0;

  font-size: var(--dp-text-sm);
  line-height: var(--dp-line-copy);

  color: var(--dp-color-text-muted);

}


.dp-card__actions {

  display: flex;
  flex-wrap: wrap;

  gap: var(--dp-space-150);

  margin-top: var(--dp-space-100);

}