@charset "UTF-8";
/* --------------------------------------------------------------------------
   swiper-lite.css — socle minimal reproduisant swiper-bundle.min.css.

   Le site d'origine chargeait Swiper 6 (CSS + JS), non fourni. On ne reprend
   ici que ce dont common.css a besoin : la mise en page du carrousel et le
   positionnement des flèches / puces. Tout le reste (couleurs, tailles,
   décalages) est déjà défini par common.css, qui doit être chargé APRÈS ce
   fichier pour que ses surcharges gagnent.

   La webfont « swiper-icons » (glyphes des flèches) est remplacée par des
   chevrons SVG en `mask`, qui suivent `font-size` et `color` comme la police.
   -------------------------------------------------------------------------- */

.swiper-container {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

.swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: content-box;
  transition-property: transform;
  transition-timing-function: ease;
}

.swiper-slide {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

/* --- Navigation ---------------------------------------------------------- */

/* Centrage vertical par marges auto (top/bottom à 0) et NON par `transform` :
   common.css, chargé après, impose `transform: scale(1)` sur ces boutons et
   écraserait un `translateY(-50%)`. */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  width: 27px;
  height: 44px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
}

.swiper-button-prev { left: 10px; }
.swiper-button-next { right: 10px; }

.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.swiper-button-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5 7 12l8.5 8.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 3.5 7 12l8.5 8.5'/%3E%3C/svg%3E");
}

.swiper-button-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5 17 12l-8.5 8.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 3.5 17 12l-8.5 8.5'/%3E%3C/svg%3E");
}

.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: none;
}

/* --- Pagination ---------------------------------------------------------- */

.swiper-pagination {
  position: absolute;
  z-index: 10;
  text-align: center;
  transition: .3s opacity;
}

.swiper-pagination-bullet {
  cursor: pointer;
  border: 0;
  padding: 0;
  appearance: none;
}

/* --- Lazy loading -------------------------------------------------------- */

.swiper-lazy-preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  margin-left: -21px;
  border: 4px solid rgba(255, 255, 255, .35);
  border-top-color: transparent;
  border-radius: 50%;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-loaded ~ .swiper-lazy-preloader { display: none; }

@keyframes swiper-preloader-spin {
  100% { transform: rotate(360deg); }
}

/* --- Mode cartes ----------------------------------------------------------
   Activé par `effect: 'cards'` côté JS, qui pose `.swiper-effect-cards`.
   Le JS place chaque slide (transform, opacity, z-index) ; ce bloc ne fait que
   préparer la pile et donner sa durée au mouvement.

   Les slides sont empilées en GRILLE et non en `position: absolute` : une
   grille se dimensionne sur son plus grand enfant, donc le carrousel garde la
   hauteur de ses images. En absolu, le conteneur se serait effondré à zéro et
   il aurait fallu lui répéter en dur le format de chaque photo.

   Transformations 2D uniquement (décalage, échelle, inclinaison). La première
   version pivotait les cartes en 3D autour de l'axe Y : ça faisait tourner des
   panneaux, pas glisser des cartes. Une pile de cartes reste à plat. */

/* De la marge autour de la pile. Sans elle, le conteneur s'arrête au ras de la
   carte du dessus (`overflow: hidden`) et rogne exactement ce qu'on cherche à
   montrer : les coins des cartes du dessous. La marge est intérieure, donc elle
   continue de couper la carte qui s'en va. */
.swiper-effect-cards {
  padding: 3% 4.5%;
}

.swiper-effect-cards .swiper-wrapper {
  display: grid;
}

.swiper-effect-cards .swiper-slide {
  grid-area: 1 / 1;                 /* toutes au même endroit : une pile */
  transform-origin: center center;
  transition-property: transform, opacity;
  /* Courbe douce, qui décélère longuement à l'arrivée : la carte se POSE sur le
     paquet au lieu de s'y arrêter net. C'est là que se joue l'essentiel de la
     sensation — plus que dans les distances parcourues. */
  transition-timing-function: cubic-bezier(.32, .72, .3, 1);
  /* La DURÉE vient du JS (`speed`), qui s'en sert aussi pour savoir quand
     renvoyer la carte sortie derrière le paquet. Écrite ici en plus, elle
     finirait par diverger de ce minuteur au premier réglage. Une seule source. */
}

/* L'ombre appartient à la CARTE entière — cadre compris — et non à la photo :
   c'est le tirage qui a une épaisseur. Sans elle, la pile se lit comme une
   seule image aux bords bizarres. Elle est posée par components.css, avec le
   cadre, pour que les deux restent réglés au même endroit. */

/* Posée le temps de remettre la carte sortie au fond du paquet : le
   replacement doit être instantané, sinon on la voit retraverser l'écran. */
.swiper-effect-cards .swiper-slide.is-instant {
  transition: none;
}

/* --- La carte qu'on tient ------------------------------------------------- */

.swiper-effect-cards { cursor: grab; }
.swiper-effect-cards.is-dragging { cursor: grabbing; }

/* Pendant le geste, la carte est pilotée image par image par le JS : la
   moindre transition la ferait traîner derrière le doigt. */
.swiper-effect-cards.is-dragging .swiper-slide {
  transition: none;
}

/* Sans ça, le navigateur propose de « déplacer l'image » dès qu'on tire
   dessus à la souris, et le geste est perdu. */
.swiper-effect-cards img {
  -webkit-user-drag: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .swiper-effect-cards .swiper-slide {
    transition: opacity .2s ease;
    transform: none !important;     /* plus de pile : un simple fondu */
  }
}