/**
 * ps_customblocks — styles Front-Office.
 *
 * Un conteneur (.ps-customblock) prend la pleine largeur de la zone et dispose
 * ses éléments (.ps-customblock__element) en grille Flexbox ; la largeur de
 * chaque élément (1/3, 2/3, 3/3) est dictée par le BO.
 */

.ps-customblock {
  /* Marges verticales par défaut pour aérer le conteneur du reste de la page. */
  margin: 2rem 0;
}

/* Variante par hook : le conteneur reçoit une classe `ps-customblock--<hook>`
   (ex. ps-customblock--displayFooterProduct) + un attribut `data-cb-hook`,
   ce qui permet de personnaliser le rendu selon l'emplacement d'injection.
   Ici : espacement renforcé en pied de fiche produit. */
.ps-customblock--displayFooterProduct {
  margin: 6rem 0;
}

/* Grille des éléments */
.ps-customblock__elements {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.ps-customblock__element {
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 100%;
}

.ps-customblock__element.cb-w-33 {
  flex-basis: calc(33.333% - 10px);
  max-width: calc(33.333% - 10px);
}

.ps-customblock__element.cb-w-66 {
  flex-basis: calc(66.666% - 5px);
  max-width: calc(66.666% - 5px);
}

.ps-customblock__element.cb-w-100 {
  flex-basis: 100%;
  max-width: 100%;
}

/* Alignement vertical de l'élément dans la hauteur de la ligne (desktop) :
   utile quand deux éléments côte à côte n'ont pas la même hauteur. Sans effet
   sur mobile où chaque élément occupe toute la largeur (seul sur sa ligne). */
.ps-customblock__element.cb-va-start {
  align-self: flex-start;
}

.ps-customblock__element.cb-va-center {
  align-self: center;
}

.ps-customblock__element.cb-va-end {
  align-self: flex-end;
}

/* Images responsives en conservant width/height (anti-CLS) */
.ps-customblock__img {
  max-width: 100%;
  height: auto;
}

.ps-customblock__content {
  line-height: 1.5;
}

/* Vidéo : iframe responsive 16:9 (préserve le ratio, évite le CLS) */
.ps-customblock__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ps-customblock__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Bouton CTA */
.ps-customblock__cta {
  display: inline-block;
}

/* Accordéon natif <details>/<summary> */
.ps-customblock__summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.5rem 0;
}

.ps-customblock__body {
  padding-top: 0.5rem;
}

/* Mobile : tout en pleine largeur */
@media (max-width: 767px) {
  .ps-customblock__element.cb-w-33,
  .ps-customblock__element.cb-w-66 {
    flex-basis: 100%;
    max-width: 100%;
  }
}