/* Tirage Tarot 3.2
   Correctif autonome pour les écrans tactiles : toutes les sections passent
   réellement sur une seule colonne et aucune photo ne peut élargir la page. */

html,
body,
main { max-width:100%; }

body { overflow-x:hidden; }

img { max-width:100%; }

@media (max-width:1100px) {
  .offer-section,
  .about-section,
  .proof-section,
  .questions-section,
  .faq-section,
  .order-section {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }

  .offer-section > *,
  .about-section > *,
  .proof-section > *,
  .questions-section > *,
  .faq-section > *,
  .order-section > * {
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .questions-note { padding-left:0 !important; }

  .hero,
  .hero-image,
  .hero-content,
  .about-image,
  .proof-image,
  .proof-copy {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .hero-image,
  .about-image,
  .proof-image {
    height:clamp(240px,34vw,340px) !important;
    min-height:0 !important;
    max-height:340px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
  }

  .hero-image img,
  .about-image img,
  .proof-image img {
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:340px !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .about-section { gap:42px !important; }
  .proof-copy { padding:64px clamp(30px,7vw,72px) 72px !important; }
}

@media (max-width:780px) {
  .section,
  .order-section {
    width:100% !important;
    max-width:100% !important;
    padding-right:22px !important;
    padding-left:22px !important;
  }

  .hero-image,
  .about-image,
  .proof-image {
    height:200px !important;
    min-height:0 !important;
    max-height:200px !important;
  }

  .hero-image img,
  .about-image img,
  .proof-image img {
    height:200px !important;
    min-height:0 !important;
    max-height:200px !important;
  }

  .about-section { gap:34px !important; }

  .proof-copy {
    padding:52px 22px 68px !important;
  }

  .proof-copy h2,
  .proof-copy > p,
  .audio-sample,
  .proof-includes,
  .proof-copy > .button {
    width:100% !important;
    max-width:100% !important;
  }
}

@media (max-width:420px) {
  .hero-image,
  .about-image,
  .proof-image,
  .hero-image img,
  .about-image img,
  .proof-image img {
    height:180px !important;
    max-height:180px !important;
  }
}