@charset "UTF-8";
/* ==================================================
   « Derrière l'atelier de Lola » (classes about-layout, about-text, about-photo-frame, about-photo).
   Smartphone / tablette : photo au-dessus du texte ; ordinateur : texte à gauche, photo à droite.
   Punaise et inclinaison de la photo : classe globale adl-pinned sur la section.
================================================== */
.about-layout {
  width: 100% !important;
}

.about-layout > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  gap: 45px !important;
}

/* Cadre autour de la photo : photo 330 px maximum + 12 px de chaque côté */
.about-photo-frame {
  order: 1 !important;
  --width: 354px !important;
  width: 354px !important;
  max-width: calc(100% - 30px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 auto !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

.about-photo-frame > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-photo {
  display: block !important;
  width: 100% !important;
  max-width: 330px !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Zone qui masque l'image pendant le zoom au survol */
.about-photo .elementor-widget-container {
  width: 100% !important;
  max-width: 330px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px;
}

.about-photo img {
  display: block !important;
  width: 100% !important;
  max-width: 330px !important;
  height: auto !important;
  margin: 0 !important;
  transition: transform 0.5s ease;
}

.about-layout > .e-con-inner > .about-text {
  order: 2 !important;
  width: 100% !important;
  max-width: 650px !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

/* ---------- Tablette ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-layout > .e-con-inner {
    gap: 50px !important;
  }
  .about-layout > .e-con-inner > .about-text {
    width: calc(100% - 80px) !important;
    max-width: 720px !important;
  }
  .about-photo img {
    max-width: 350px !important;
  }
}
/* ---------- Ordinateur : texte à gauche, photo à droite, calée sur la première ligne du texte ---------- */
@media (min-width: 1024px) {
  .about-layout > .e-con-inner {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(60px, 7vw, 110px) !important;
  }
  .about-layout > .e-con-inner > .about-text {
    order: 1 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: 650px !important;
    margin: 0 !important;
  }
  .about-layout > .e-con-inner > .about-photo-frame {
    order: 2 !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: none !important;
    height: fit-content !important;
    align-self: flex-start !important;
    margin: -6px 0 0 !important;
    padding: 12px !important;
  }
  .about-photo {
    width: auto !important;
    max-width: none !important;
  }
  .about-photo img {
    width: 100% !important;
    max-width: 440px !important;
  }
}
/* Zoom doux de la photo au survol (souris) */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .about-photo-frame:hover .about-photo img {
    transform: scale(1.04);
  }
}