/* ==========================================================================
   Bloc découverte de prénoms — Widget Elementor homepage
   Filtre genre + carrousel (cartes prénom identiques au générateur)
   + slide CTA + 2 boutons d'accès (vert/orange) au style des boutons du site.
   On réutilise les composants réels (cartes, chips, boutons, skeleton).
   Tout est scopé .cp-home-bloc pour ne pas fuiter sur le thème homepage.
   ========================================================================== */

@import './design-system/_tokens.css';
@import './design-system/components/_chips.css';
@import './design-system/components/_buttons.css';
@import './design-system/components/_prenom-card.css';
@import './design-system/components/_skeleton.css';

.cp-home-bloc {
  --cphb-gap: var(--cp-space-5, 1.5rem);
  --cphb-card-w: 320px;

  box-sizing: border-box;
  max-width: var(--cp-container-max, 1120px);
  margin-inline: auto;
  padding-inline: var(--cp-space-4, 1rem);
  font-family: var(--cp-font-body, system-ui, sans-serif);
  color: var(--cp-color-text-body, #7a7a7a);
}

.cp-home-bloc *,
.cp-home-bloc *::before,
.cp-home-bloc *::after {
  box-sizing: border-box;
}

/* ---- En-tête ---- */
.cp-home-bloc__header {
  text-align: center;
  margin-bottom: var(--cp-space-5, 1.5rem);
}

.cp-home-bloc__title {
  font-family: var(--cp-font-display, var(--cp-font-body, serif));
  color: var(--cp-color-text-heading, #2d2d2d);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.15;
  margin: 0 0 var(--cp-space-2, 0.5rem);
}

.cp-home-bloc__subtitle {
  font-size: var(--cp-text-base, 1rem);
  color: var(--cp-color-text-body, #7a7a7a);
  margin: 0;
}

/* ---- Filtre genre (segmented control autonome, hors .cp-app) ---- */
.cp-home-bloc__filter {
  display: flex;
  justify-content: center;
  margin-bottom: var(--cphb-gap);
}

.cp-home-bloc__segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cp-color-bg-soft, #faf3ec);
  border: 1px solid var(--cp-color-border, #ede8e0);
  border-radius: 999px;
}

.cp-home-bloc__segmented .cp-segmented-control__option {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--cp-color-text-body, #7a7a7a);
  font: inherit;
  font-weight: var(--cp-weight-semibold, 600);
  font-size: var(--cp-text-sm, 0.9rem);
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cp-home-bloc__segmented .cp-segmented-control__option:hover:not(.cp-segmented-control__option--active) {
  color: var(--cp-color-text-heading, #2d2d2d);
}

.cp-home-bloc__segmented .cp-segmented-control__option--active {
  background: var(--cp-color-bg, #fffefb);
  color: var(--cp-color-text-heading, #2d2d2d);
  box-shadow: 0 1px 3px rgba(45, 45, 45, 0.12);
}

.cp-home-bloc__segmented .cp-segmented-control__option:focus-visible {
  outline: 2px solid var(--cp-color-secondary, #6bbaaf);
  outline-offset: 2px;
}

/* ---- Carrousel ---- */
.cp-home-carousel {
  position: relative;
  margin-bottom: var(--cp-space-6, 2rem);
}

.cp-home-carousel__track {
  display: flex;
  gap: var(--cphb-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Marge interne généreuse : overflow-x:auto rogne aussi verticalement,
     ce padding évite que l'ombre portée des cartes soit coupée. */
  padding: 18px 24px 30px;
  scroll-padding-inline: 24px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cp-home-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Dimensionnement pour le carrousel (la carte elle-même reste celle du
   générateur, définie dans _prenom-card.css). */
.cp-home-carousel__track .cp-prenom-card,
.cp-home-carousel__track .cp-skeleton-prenom-card {
  flex: 0 0 var(--cphb-card-w);
  width: var(--cphb-card-w);
  scroll-snap-align: start;
}

/* Blindage anti-Elementor : sur la homepage, Elementor réécrit les titres (h2)
   et peut neutraliser certaines propriétés du conteneur. On ré-impose ici les
   valeurs EXACTES du composant générateur — rien de nouveau, juste protégé. */
.cp-home-bloc .cp-prenom-card {
  background: #fff;
  border-radius: var(--cp-radius-lg, 16px);
  box-shadow: var(--cp-shadow-sm, 0 2px 6px rgba(0, 0, 0, 0.05));
  padding: var(--cp-space-7, 28px);
}

.cp-home-bloc .cp-prenom-card .cp-prenom-card__name {
  display: block;
  text-align: center;
  margin: 0;
  color: var(--cp-color-text-heading, #2d2d2d) !important;
  font-family: var(--cp-font-display, 'Caveat', cursive) !important;
  font-weight: var(--cp-weight-bold, 700) !important;
  font-size: var(--cp-text-4xl, 48px) !important;
  line-height: 1.05 !important;
}

/* Boutons de navigation */
.cp-home-carousel__nav {
  position: absolute;
  top: calc(50% - 0.5rem);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cp-color-border, #ede8e0);
  border-radius: 999px;
  background: var(--cp-color-bg, #fffefb);
  color: var(--cp-color-text-heading, #2d2d2d);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 45, 45, 0.12);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.cp-home-carousel__nav:hover {
  transform: translateY(-50%) scale(1.06);
}

.cp-home-carousel__nav--prev { left: -22px; }
.cp-home-carousel__nav--next { right: -22px; }

.cp-home-carousel__nav[hidden] { display: none; }

/* ---- Slide CTA finale (carte au format prénom) ---- */
.cp-home-carousel__track .cp-home-cta {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--cp-space-4, 1rem);
  text-decoration: none;
  background: var(--cp-gradient-teal-soft, linear-gradient(135deg, #fff, #e6f2f0));
  border: 1px dashed var(--cp-color-secondary-light, #c2e3df);
}

.cp-home-cta__text {
  font-family: var(--cp-font-display, serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--cp-color-text-heading, #2d2d2d);
}

.cp-home-cta .cp-button {
  pointer-events: none; /* le clic est porté par l'ancre entière */
}

/* ---- Boutons d'accès (vert / orange) — style boutons du site ---- */
.cp-home-bloc__access {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cphb-gap);
}

.cphb-access {
  color: #fff;
  box-shadow: var(--cp-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.cphb-access--green {
  background: linear-gradient(135deg, var(--cp-color-secondary, #6bbaaf) 0%, var(--cp-color-secondary-dark, #4a9b8f) 100%);
}

.cphb-access--orange {
  background: var(--cp-gradient-primary-btn, linear-gradient(135deg, #f08249 0%, #e86b2a 100%));
}

.cphb-access:hover {
  transform: translateY(-2px);
  box-shadow: var(--cp-shadow-card-hover, 0 8px 24px rgba(240, 130, 73, 0.12));
}

.cphb-access__arrow {
  transition: transform 0.18s ease;
}

.cphb-access:hover .cphb-access__arrow {
  transform: translateX(4px);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .cp-home-bloc__access {
    flex-direction: column;
  }
  .cphb-access {
    width: 100%;
  }
  .cp-home-carousel__nav {
    display: none;
  }
  .cp-home-bloc {
    --cphb-card-w: 78vw;
  }
}