/* =========================================================================
   MAQUETTE_3_2019 — point-de-controle.css (modernisé, mobile-first)
   Bug corrigé : la carte ".item" faisait 500x500px en dur, placée dans un
   conteneur avec "offset-3 offset-lg-4" (un décalage de 25% à 33% de la
   largeur) — sur un écran de 375px de large, la carte à elle seule (500px)
   dépassait largement l'écran, provoquant un débordement horizontal.
   La carte est maintenant fluide (largeur/hauteur en %, ratio conservé).
   ========================================================================= */

.effect {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid #212121;
  box-shadow: 2px 2px 10px rgba(33, 33, 33, 0.25);
}
.item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item__info {
  position: absolute;
  top: 7px;
  left: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 1rem;
}

.item__header {
  position: relative;
  margin: 0 0 20px 0;
  padding: 15px 0;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.item__header:after {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  height: 2px;
  width: 100%;
  content: "";
  background-color: #8D909B;
}

.item__links { display: flex; }

.item__link-block {
  position: relative;
  width: 42px;
  height: 42px;
  margin-right: 10px;
}
.item__link-block:last-child { margin-right: 0; }

.item__link {
  transition: all 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #212121;
  text-decoration: none;
  border: 1px solid #BB9955;
  border-radius: 50%;
}
.item__link:hover { color: #fff; background-color: #3c3c3c; }

.item--eff2 .item__info { top: -100%; }
.item--eff2 .item__header { left: -25px; opacity: 0; }
.item--eff2 .item__header:after { transform: scaleX(0); transform-origin: right center; }
.item--eff2 .item__link-block { transform: scale(1.2); opacity: 0; }
.item--eff2:hover .item__info,
.item--eff2:focus-within .item__info {
  transition: all 0.35s cubic-bezier(0.63, 0.01, 0, 1.39);
  top: 7px;
  border: 1px solid #BB9955;
}
.item--eff2:hover .item__header,
.item--eff2:focus-within .item__header {
  transition: all 0.2s linear 0.25s;
  left: 0;
  opacity: 1;
}
.item--eff2:hover .item__header:after,
.item--eff2:focus-within .item__header:after {
  transition: all 0.2s linear 0.35s;
  transform: scaleX(1);
  border: 1px solid #BB9955;
}
.item--eff2:hover .item__link-block,
.item--eff2:focus-within .item__link-block {
  transform: scale(1);
  opacity: 1;
  transition: all 0.2s linear 0.45s;
}

.text-point-controle {
  color: #fff;
  font-weight: bold;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  text-align: center;
}

/*# sourceMappingURL=point-de-controle.css.map */