/*
 * Composants génériques de l'éditeur visuel (0.6.0) — chargée au front sur
 * les seules pages CMS qui en portent un (hook actionFrontControllerSetMedia)
 * et dans le cadre de l'éditeur. Seule la MISE EN PAGE est ici : typographie,
 * couleurs et boutons restent ceux du thème.
 *
 * Le thème doit toujours pouvoir ajuster ces règles. Deux précautions :
 *  - elles sont dans la couche `webp-pagebuilder` : une règle hors couche
 *    l'emporte sur toute règle en couche. Un thème SANS couches les ajuste
 *    donc sans rien faire. Un thème AVEC couches (Hummingbird : `@layer
 *    vendors, bs-base, …`) doit nommer `webp-pagebuilder` en tête de sa
 *    déclaration, pour que ses propres couches passent après ;
 *  - à l'intérieur, elles sont en :where() (spécificité nulle) : la feuille
 *    du thème se charge AVANT celles des modules, l'ordre ne joue donc pas
 *    non plus contre lui.
 *
 * « Texte et média » :
 *   <section class="pb-texte-media [pb-texte-media--media-gauche] [pb-texte-media--carre|--portrait]">
 *     <div class="pb-texte-media__texte"><h2 class="pb-texte-media__titre">…</h2><div class="pb-texte-media__corps">…</div></div>
 *     <figure class="pb-texte-media__media">
 *       <div class="pb-texte-media__piste"><img class="pb-texte-media__image" …> …</div>
 *       [<button class="pb-fleche pb-fleche--precedent pb-texte-media__fleche pb-texte-media__fleche--precedent"> + --suivant] (deux images et plus)
 *     </figure>
 *   </section>
 *
 * « Carrousel » (0.7.0) :
 *   <section class="pb-carrousel [pb-carrousel--2|--3] [pb-carrousel--large|--carre|--portrait]">
 *     <div class="pb-carrousel__piste"><img class="pb-carrousel__image" …> …</div>
 *     [<button class="pb-fleche pb-fleche--precedent pb-carrousel__fleche pb-carrousel__fleche--precedent"> + --suivant] (deux images et plus)
 *   </section>
 */

@layer webp-pagebuilder {
  :where(.pb-texte-media) {
    --pb-texte-media-ecart: clamp(1.5rem, 4vw, 4rem);
    --pb-texte-media-ratio: 4 / 3;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--pb-texte-media-ecart);
    align-items: center;
    margin-block: var(--pb-texte-media-ecart);
  }

  :where(.pb-texte-media--carre) {
    --pb-texte-media-ratio: 1;
  }

  :where(.pb-texte-media--portrait) {
    --pb-texte-media-ratio: 4 / 5;
  }

  /* Média à gauche : l'ordre du HTML ne change pas (lecture : texte d'abord). */
  :where(.pb-texte-media--media-gauche) :where(.pb-texte-media__media) {
    order: -1;
  }

  :where(.pb-texte-media__texte) {
    min-width: 0;
  }

  :where(.pb-texte-media__titre) {
    margin-block-start: 0;
  }

  :where(.pb-texte-media__corps) > :last-child {
    margin-block-end: 0;
  }

  :where(.pb-texte-media__media) {
    position: relative;
    min-width: 0;
    margin: 0;
    aspect-ratio: var(--pb-texte-media-ratio);
    overflow: hidden;
  }

  /* Piste : une image par « page », défilement au doigt, à la molette ou aux flèches. */
  :where(.pb-texte-media__piste) {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  :where(.pb-texte-media__piste)::-webkit-scrollbar {
    display: none;
  }

  :where(.pb-texte-media__piste) > * {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
  }

  :where(.pb-texte-media__piste) > img,
  :where(.pb-texte-media__piste) > video,
  :where(.pb-texte-media__piste) > picture img {
    display: block;
    object-fit: cover;
  }

  :where(.pb-texte-media__piste) > iframe {
    border: 0;
  }

  /* Flèches des pistes (tous les composants) : `pb-fleche` + `pb-fleche--precedent`
     ou `--suivant`, en plus des classes du composant. Le thème les habille UNE
     fois pour tous les composants, présents et à venir — directement, ou par
     ces variables. Les classes du composant restent pour le contenu enregistré
     avant 0.7.0. */
  :where(.pb-fleche, .pb-texte-media__fleche, .pb-carrousel__fleche) {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--pb-fleche-taille, 2.5rem);
    height: var(--pb-fleche-taille, 2.5rem);
    padding: 0;
    color: var(--pb-fleche-couleur, #000);
    background: var(--pb-fleche-fond, rgb(255 255 255 / 85%));
    border: 0;
    border-radius: var(--pb-fleche-arrondi, 50%);
    transform: translateY(-50%);
    cursor: pointer;
  }

  :where(.pb-fleche, .pb-texte-media__fleche, .pb-carrousel__fleche)::before {
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    border-block-start: 2px solid currentcolor;
    border-inline-start: 2px solid currentcolor;
  }

  :where(.pb-fleche--precedent, .pb-texte-media__fleche--precedent, .pb-carrousel__fleche--precedent) {
    left: var(--pb-fleche-marge, 1rem);
  }

  :where(.pb-fleche--precedent, .pb-texte-media__fleche--precedent, .pb-carrousel__fleche--precedent)::before {
    transform: translateX(15%) rotate(-45deg);
  }

  :where(.pb-fleche--suivant, .pb-texte-media__fleche--suivant, .pb-carrousel__fleche--suivant) {
    right: var(--pb-fleche-marge, 1rem);
  }

  :where(.pb-fleche--suivant, .pb-texte-media__fleche--suivant, .pb-carrousel__fleche--suivant)::before {
    transform: translateX(-15%) rotate(135deg);
  }

  :where(.pb-fleche, .pb-texte-media__fleche, .pb-carrousel__fleche):disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* Sous 768 px : texte puis média, empilés, quel que soit le côté choisi. */
  @media (max-width: 767.98px) {
    :where(.pb-texte-media) {
      grid-template-columns: minmax(0, 1fr);
    }

    :where(.pb-texte-media--media-gauche) :where(.pb-texte-media__media) {
      order: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.pb-texte-media__piste) {
      scroll-behavior: auto;
    }
  }

  /* ── Carrousel ─────────────────────────────────────────────────────── */
  /* Images seules ; 1, 2 ou 3 visibles (une seule sous 768 px) ; on défile
     d'une image. Flèches : les règles communes `pb-fleche`, plus haut. */
  :where(.pb-carrousel) {
    --pb-carrousel-visibles: 1;
    --pb-carrousel-ecart: 1rem;
    --pb-carrousel-ratio: 4 / 3;

    position: relative;
    margin-block: clamp(1.5rem, 4vw, 4rem);
  }

  :where(.pb-carrousel--2) {
    --pb-carrousel-visibles: 2;
  }

  :where(.pb-carrousel--3) {
    --pb-carrousel-visibles: 3;
  }

  :where(.pb-carrousel--large) {
    --pb-carrousel-ratio: 16 / 9;
  }

  :where(.pb-carrousel--carre) {
    --pb-carrousel-ratio: 1;
  }

  :where(.pb-carrousel--portrait) {
    --pb-carrousel-ratio: 4 / 5;
  }

  :where(.pb-carrousel__piste) {
    display: flex;
    gap: var(--pb-carrousel-ecart);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  :where(.pb-carrousel__piste)::-webkit-scrollbar {
    display: none;
  }

  :where(.pb-carrousel__piste) > * {
    flex: 0 0 calc((100% - (var(--pb-carrousel-visibles) - 1) * var(--pb-carrousel-ecart)) / var(--pb-carrousel-visibles));
    min-width: 0;
    aspect-ratio: var(--pb-carrousel-ratio);
    scroll-snap-align: start;
  }

  :where(.pb-carrousel__piste) > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  @media (max-width: 767.98px) {
    :where(.pb-carrousel) {
      --pb-carrousel-visibles: 1;
    }
  }
}