/* ======================================================================
   FULLCODE — COMPOSANT CATALOGUE FEUILLETABLE
   Réutilisable plusieurs fois sur une même page

   JS : /assets/js/components/catalogue.js
   ====================================================================== */

.catalogue {
  --catalogue-accent: #205baa;
  --catalogue-accent-dark: #0b2f61;

  --catalogue-control-bg:
    var(--catalogue-accent);

  --catalogue-control-color:
    #fff;

  --catalogue-indicator-color:
    var(--catalogue-accent-dark);


  /*
    Largeur de référence du livre OUVERT.

    Cette valeur sert à la fois :
    - au stage
    - à l'écartement des boutons
    - au compteur

    Elle ne change pas lorsque le livre
    affiche seulement la couverture.
  */

  --catalogue-open-width:
    min(94%, 900px);


  /*
    Taille des boutons.
  */

  --catalogue-control-size:
    46px;


  width: 100%;

  padding: 0;

  outline: none;


  /*
    Toute la grille des contrôles fait
    exactement la largeur du livre ouvert.
  */

  display: grid;

  grid-template-columns:
    var(--catalogue-control-size) minmax(0,
      calc(var(--catalogue-open-width) - var(--catalogue-control-size) * 2)) var(--catalogue-control-size);

  justify-content: center;
}


/* =========================================================
   FOCUS GLOBAL
   ========================================================= */

.catalogue:focus-visible {
  outline:
    3px solid color-mix(in srgb,
      var(--catalogue-accent) 45%,
      transparent);

  outline-offset: 8px;

  border-radius: 18px;
}


/* =========================================================
   STAGE
   ========================================================= */

.catalogue-stage {
  position: relative;

  grid-column:
    1 / -1;


  justify-self: center;


  /*
    Toujours la largeur du livre ouvert.
  */

  width: 100%;


  min-height:
    min(60vw,
      560px);


  display: flex;

  align-items: center;
  justify-content: center;


  perspective:
    2200px;


  filter:
    drop-shadow(0 28px 32px rgba(11, 47, 97, 0.28));
}


/* =========================================================
   PAGES
   ========================================================= */

.catalogue-stage [data-catalogue-left],
.catalogue-stage [data-catalogue-right] {
  position: relative;

  width: 50%;

  aspect-ratio: 1;

  overflow: hidden;

  background: #fff;


  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;


  transform-style:
    preserve-3d;


  will-change:
    transform;
}


/* =========================================================
   PAGE GAUCHE
   ========================================================= */

.catalogue-stage [data-catalogue-left] {
  border-radius:
    10px 0 0 10px;

  transform-origin:
    right center;
}


/* =========================================================
   PAGE DROITE
   ========================================================= */

.catalogue-stage [data-catalogue-right] {
  border-radius:
    0 10px 10px 0;

  transform-origin:
    left center;
}


/* =========================================================
   IMAGES
   ========================================================= */

.catalogue-stage img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;


  user-select: none;

  -webkit-user-drag: none;


  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;


  /*
    Évite certains artefacts de repaint
    pendant les rotations 3D.
  */

  transform:
    translateZ(0);
}



/* =========================================================
   COUVERTURE / PAGE SEULE
   ========================================================= */

.catalogue.is-single-page .catalogue-stage {

  /*
    Le stage VISUEL passe à une demi-largeur.

    Mais la grille du .catalogue reste,
    elle, à la largeur de deux pages.

    Les boutons ne bougent donc plus.
  */

  width: 50%;
}


/*
  On cache la page gauche.
*/

.catalogue.is-single-page .catalogue-stage [data-catalogue-left] {
  display: none;
}


/*
  La page restante occupe tout le stage.
*/

.catalogue.is-single-page .catalogue-stage [data-catalogue-right] {
  width: 100%;

  border-radius: 10px;
}

/* =========================================================
   ANIMATION PAGE SUIVANTE
   ========================================================= */

.catalogue-stage.is-turning-next [data-catalogue-right] {
  animation:
    catalogue-turn-next 0.48s ease-in-out;
}


@keyframes catalogue-turn-next {

  0% {
    transform:
      rotateY(0deg);

    filter:
      brightness(1);
  }


  50% {
    /*
      Presque de profil au moment où
      le JS remplace l'image.
    */

    transform:
      rotateY(-78deg);

    filter:
      brightness(0.76);
  }


  100% {
    transform:
      rotateY(0deg);

    filter:
      brightness(1);
  }

}


/* =========================================================
   ANIMATION PAGE PRÉCÉDENTE
   ========================================================= */

.catalogue-stage.is-turning-prev [data-catalogue-left] {
  animation:
    catalogue-turn-previous 0.48s ease-in-out;
}


@keyframes catalogue-turn-previous {

  0% {
    transform:
      rotateY(0deg);

    filter:
      brightness(1);
  }


  50% {
    transform:
      rotateY(78deg);

    filter:
      brightness(0.76);
  }


  100% {
    transform:
      rotateY(0deg);

    filter:
      brightness(1);
  }

}


/* =========================================================
   CONTRÔLES
   ========================================================= */

/*
  Stage = ligne 1
  boutons / compteur = ligne 2

  Comme la grille entière fait la largeur
  du livre ouvert, ils restent toujours
  parfaitement en place.
*/

.catalogue [data-catalogue-prev],
.catalogue [data-catalogue-next],
.catalogue [data-catalogue-counter] {
  grid-row: 2;

  margin-top: 22px;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.catalogue [data-catalogue-prev],
.catalogue [data-catalogue-next] {
  width:
    var(--catalogue-control-size);

  height:
    var(--catalogue-control-size);


  padding: 0;


  display: grid;

  place-items: center;


  border: 0;

  border-radius: 50%;


  background:
    var(--catalogue-control-bg);


  color:
    var(--catalogue-control-color);


  box-shadow:
    0 8px 18px rgba(11,
      47,
      97,
      0.23);


  cursor: pointer;


  transition:
    transform 0.2s ease,
    opacity 0.2s ease,
    box-shadow 0.2s ease;
}


/* =========================================================
   PREVIOUS
   ========================================================= */

.catalogue [data-catalogue-prev] {
  grid-column: 1;

  justify-self: start;
}


/* =========================================================
   NEXT
   ========================================================= */

.catalogue [data-catalogue-next] {
  grid-column: 3;

  justify-self: end;
}


/* =========================================================
   COMPTEUR
   ========================================================= */

.catalogue [data-catalogue-counter] {
  grid-column: 2;

  justify-self: center;
  align-self: center;


  min-width: 170px;


  margin-bottom: 0;


  text-align: center;


  color:
    var(--catalogue-indicator-color);


  font-size: 0.82rem;

  font-weight: 700;
}


/* =========================================================
   HOVER / FOCUS BOUTONS
   ========================================================= */

.catalogue [data-catalogue-prev]:hover:not(:disabled),

.catalogue [data-catalogue-prev]:focus-visible:not(:disabled),

.catalogue [data-catalogue-next]:hover:not(:disabled),

.catalogue [data-catalogue-next]:focus-visible:not(:disabled) {

  transform:
    scale(1.08);


  box-shadow:
    0 12px 24px rgba(11,
      47,
      97,
      0.30);
}


/* =========================================================
   FOCUS BOUTONS
   ========================================================= */

.catalogue [data-catalogue-prev]:focus-visible,

.catalogue [data-catalogue-next]:focus-visible {

  outline:
    3px solid color-mix(in srgb,
      var(--catalogue-accent) 36%,
      #fff);


  outline-offset: 3px;
}


/* =========================================================
   DISABLED
   ========================================================= */

.catalogue [data-catalogue-prev]:disabled,

.catalogue [data-catalogue-next]:disabled {

  opacity: 0.28;

  cursor: not-allowed;

  transform: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .catalogue {

    /*
      Sur mobile la largeur de référence
      correspond maintenant à UNE page.
    */

    --catalogue-open-width:
      min(92%,
        470px);


    --catalogue-control-size:
      46px;


    grid-template-columns:
      var(--catalogue-control-size) minmax(0,

        calc(var(--catalogue-open-width) - var(--catalogue-control-size) * 2)) var(--catalogue-control-size);
  }


  /* =======================================================
     STAGE MOBILE
     ======================================================= */

  .catalogue-stage,
  .catalogue.is-single-page .catalogue-stage {

    /*
      Toujours exactement une page,
      couverture ou intérieur.
    */

    width: 100%;


    min-height:
      min(86vw,
        520px);
  }


  /* =======================================================
     UNE SEULE PAGE
     ======================================================= */

  .catalogue-stage [data-catalogue-left] {
    display: none;
  }


  .catalogue-stage [data-catalogue-right] {
    width: 100%;

    border-radius: 8px;
  }


  /* =======================================================
     PAS DE PLI
     ======================================================= */

  .catalogue-stage::after {
    display: none;
  }


  /* =======================================================
     COMPTEUR
     ======================================================= */

  .catalogue [data-catalogue-counter] {
    min-width: 0;

    width: 100%;
  }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media (max-width: 420px) {

  .catalogue {
    --catalogue-control-size:
      42px;
  }


  .catalogue [data-catalogue-prev],
  .catalogue [data-catalogue-next] {
    width: 42px;
    height: 42px;
  }


  .catalogue [data-catalogue-counter] {
    font-size: 0.76rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .catalogue-stage [data-catalogue-left],

  .catalogue-stage [data-catalogue-right] {

    animation:
      none !important;

  }


  .catalogue [data-catalogue-prev],

  .catalogue [data-catalogue-next] {

    transition:
      none !important;

  }

}