/* ===== Variables ===== */
.or-palpation {
  --or-pink: rgba(239, 166, 177, 1);
  --or-grey: #f4f2f0;
  --or-black: #000;
  --or-gap: 12px;
  color: var(--or-black);
  text-align: center;
}

/* ===== INTRO ===== */
.or-hero_container {
  border: 2px solid red;
}
.or-hero_title {
  color: rgba(239, 166, 177, 1);
  text-transform: uppercase;
  font-family: "REM";
  font-weight: 500;
  font-size: 2rem;
}
.or-hero_subtitle {
  color: rgba(239, 166, 177, 1);
  text-transform: uppercase;
  font-family: "REM";
  font-size: 1.1rem;
}

.experience-category-categoryTitle:has(.LP-octobre-rose__Title) #categoryBackgroundImage {
  height: 80vh;
}

/* Hero : texte en bas sur mobile (les parents prennent toute la hauteur) */
@media (max-width: 1023px) {
  .hero:has(.LP-octobre-rose__Title) {
    justify-content: flex-end;
  }
  .LP-octobre-rose__Title { padding-bottom: 40px; }


}

/* Hero : dégradé sur toute l'image */
.hero:has(.LP-octobre-rose__Title) {
  position: relative;
}
.hero:has(.LP-octobre-rose__Title)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.2) 30%,
    rgba(0, 0, 0, 0.55) 60%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.hero:has(.LP-octobre-rose__Title) .experience-categoryTitle {
  position: relative;
  z-index: 2;   /* texte au-dessus du dégradé */
}

/* ===== SECTION 2 ===== */
.or-second_container {
  padding: 44px 0;
}

/* Boutons : scroll horizontal sur mobile */
.or-second_nav_list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 24px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.or-second_nav_list::-webkit-scrollbar { display: none; }
.or-second_nav_link {
  display: block;
  white-space: nowrap;
  padding: 10px 16px;
  border: 1px solid #808080;
  font-size: 16px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

/* Texte */
.or-second_text {
  padding: 32px 24px 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.or-second_text p { margin: 0 0 16px; }
.or-second_text p:last-child { margin-bottom: 0; }
.or-second_lead { font-weight: 600; }

/* ===== BANNER INFOS ===== */
.or-banner_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background-color: rgba(245, 179, 189, 1);
  padding: 2rem 24px 1.5rem 24px;
}
.or-banner_title {
  text-transform: uppercase;
  font-weight: 600;
  font-family: "REM";
  font-size: 0.9rem;
}
.or-banner_subtitle {
  text-align: center;
}
.or-banner_subtitle span {
  font-weight: 600;
}

/* ===== PORTRAITS ===== */
.or-portraits {
  padding: 48px 0 0;
}
.or-portraits_header {
  padding: 0 24px 24px;
  text-align: center;
}
.or-portraits_title,.or-collection_title{           /* même style que .or-palpation__title */
  margin: 0 0 24px;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "REM";
}
.or-portraits_subtitle {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(239, 166, 177, 1);
  font-family: "REM";
}

.or-portrait + .or-portrait { margin-top: 48px; }
.or-portrait + .or-portraits_header { margin-top: 48px; }

/* Slider photos (mobile) */
.or-portrait_track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.or-portrait_track::-webkit-scrollbar { display: none; }
.or-portrait_slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 24px;
  scroll-snap-align: start;
}
.or-portrait_img {
  display: block;
  width: 100%;
  height: auto;
}

/* Légende */
.or-portrait_caption {
  padding-top: 12px;
  text-align: left;
}
.or-portrait_name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: uppercase;
}
.or-portrait_name span { text-transform: none; }
.or-portrait_info {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Traits (style repris de .or-carousel__dot) */
.or-portrait_dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 16px 0 24px;
}
.or-portrait_dots .or-carousel__dot.is-active::after { background: #000; }

/* Vidéo */
.or-portrait_video {
  position: relative;
}
.or-portrait_media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ddd;
}
.or-portrait_play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 56px;
  padding: 0;
  border: 0;
  background: rgba(239, 166, 177, 1);
  clip-path: polygon(0 0, 100% 50%, 0 100%);  /* triangle */
  transform: translate(-40%, -50%);
  cursor: pointer;
}
.or-portrait_play:focus-visible { outline: 2px solid #000; }
.or-portrait_video.is-playing .or-portrait_play { display: none; }

/* ===== AUTOPALPATION ===== */

/* Intro */
.or-palpation__intro {
  padding: 40px 24px 32px;
  width: 100%;
  margin: 0 auto;
}
.or-palpation__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
.or-palpation__subtitle {
  margin: 10px 0 24px;
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
}
.or-palpation__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Carrousel */
.or-carousel__track {
  display: flex;
  gap: var(--or-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
}
.or-carousel__track::-webkit-scrollbar { display: none; }
.or-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;   /* sinon le snap bloque le drag */
  user-select: none;
}

/* Slide */
.or-carousel__slide {
  flex: 0 0 85%;            /* mobile : 1 slide + un bout de la suivante */
  scroll-snap-align: start;
  background: var(--or-grey);
  padding: 24px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.or-carousel__slide > :last-child { margin-bottom: 0; }

/* Contenu slide */
.or-carousel__num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px;
}
.or-carousel__heading {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.or-carousel__method {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
.or-carousel__desc {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 4.8em;        /* 3 lignes : images alignées */
}
.or-carousel__img {
  margin-top: 5%;
  width: 60%;
  max-width: 160px;
  height: auto;
  pointer-events: none;     /* évite le drag natif de l'image */
}

/* Slides méthode (4-5-6) */
.or-carousel__slide--method { gap: 24px; }
.or-carousel__slide--method > * { margin: 0; }
.or-carousel__slide--method .or-carousel__img {
  margin: 0 0 12px;
  width: 35%;
  max-width: 80px;
}

/* Traits de position */
.or-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 24px 0 48px;
}
.or-carousel__dot {
  position: relative;
  width: 40px;
  height: 12px;             /* zone cliquable */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.or-carousel__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: #d9d9d9;
}
.or-carousel__dot.is-active::after { background: var(--or-black); }
.or-carousel__dot:focus-visible { outline: 1px solid var(--or-black); }

/* Partie rose */
.or-palpation__download {
  background: var(--or-pink);
  padding: 44px 24px;
}
.or-palpation__download-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}
.or-palpation__link {
  font-size: 14px;
  color: inherit;
  text-decoration: underline;
}

.or-collection_title{           
  margin: 64px 14px 24px 14px;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "REM";
line-height: normal;
}


/* ===== Mobile / desktop ===== */
.or-only-desktop { display: none; }

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  .or-only-mobile { display: none; }
  .or-only-desktop { display: block; }


.or-hero_subtitle {
   font-size: 1.5rem;
}
.experience-category-categoryTitle:has(.LP-octobre-rose__Title) #categoryBackgroundImage {
  height: 90vh;
}

.hero:has(.LP-octobre-rose__Title)::after {
    display: none;
  }

  /* Bannière */
  .or-banner_subtitle {
    text-align: center;
  }

  /* Section 2 */
  .or-second_nav_list { justify-content: center; }
  .or-second_nav_link {
    padding: 8px 16px;
    font-size: 14px;
  }
  .or-second_text {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
  }
  .or-second_text p { margin-bottom: 24px; }
  .or-second_text p:last-child { margin-bottom: 0; }

  /* Portraits */
  .or-portraits_header {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 0;
  }
  .or-portraits_subtitle {
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.2;               /* hauteur du slogan = 1.8rem */
  }

.or-portraits_title, .or-collection_title {margin: 0 0 90px;}
  .or-portrait + .or-portrait { margin-top: 80px; }
  .or-portrait + .or-portraits_header { margin-top: 80px; }
.or-collection_title{margin: 44px 0 0 0 !important;}
.or-portrait_name {
font-size: 16px;
}

.or-portrait_info{
font-size: 14px;
}

  .or-portrait_track {
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: 88px;
    align-items: start;
    max-width: 1000px;
    margin: 0 auto 48px;
    padding: 0 24px;
    overflow: visible;
  }
  .or-portrait_slide { padding: 0; }
  .or-portrait_slide--small {
    margin-top: 16px;               /* espace sous le slogan */
  }
  .or-portrait_slide--big {
    margin-top: calc(-1.8rem - 16px);  /* haut aligné sur le slogan */
  }
  .or-portrait_dots { display: none; }

  .or-portrait_media { aspect-ratio: 16 / 9; }
  .or-portrait_play {
    width: 56px;
    height: 64px;
  }

  /* Autopalpation */
  .or-palpation__intro { width: 61%; }
  .or-palpation__text { font-size: 15px; }

  .or-carousel__slide {
    flex-basis: 21%;
    aspect-ratio: 3 / 4;
    padding: 32px 32px 40px;
  }
  .or-carousel__num { font-size: 2.5rem; }
  .or-carousel__desc { font-size: 15px; }
  .or-carousel__img { max-width: 180px; }
  .or-carousel__slide--method .or-carousel__img { max-width: 90px; }


  .or-palpation__download-text,
  .or-palpation__link { font-size: 15px; }
}

.or-palpation__qr-link.or-only-desktop {
    display: block;
    width: 120px;          /* la zone cliquable = la taille du QR */
    margin: 0 auto 16px;
  }
  .or-palpation__qr {
    display: block;
    margin: 0;             /* la marge est maintenant sur le lien */
    width: 120px;
    height: 120px;
  }

/* ===== Petits desktops (1024 ? 1439) ===== */
/* Doit rester APRÈS le bloc desktop */
@media (min-width: 1024px) and (max-width: 1439px) {
  .or-carousel__slide { flex-basis: 28%; }
}