/* OFFER — séquence coffre pilotée par le défilement.
   CSS isolé : toutes les règles sont préfixées .of-coffre / #of-coffre. */

#of-coffre{
  --of-coffre-run: 400svh;              /* course de défilement, en plus de la scène */
  position: relative;
  background: #060a0e;
  height: calc(100vh + 400vh);          /* repli pour les navigateurs sans svh */
  height: calc(100svh + var(--of-coffre-run));
}

@media (max-width: 767px){
  #of-coffre{ --of-coffre-run: 350svh; }
}

/* Scène collante */
.of-coffre__scene{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #060a0e center/contain no-repeat;
  background-image: url('poster-desktop.jpg');
}
@media (max-width: 767px) and (orientation: portrait){
  .of-coffre__scene{ background-image: url('poster-mobile.jpg'); }
}

.of-coffre__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 400ms linear;
  background: transparent;
}
.of-coffre__video[data-ready="1"]{ opacity: 1; }

/* Léger recadrage seulement sur les proportions proches du 16:9,
   pour ne jamais faire disparaître les maquettes. */
@media (min-aspect-ratio: 7/5) and (max-aspect-ratio: 19/10){
  .of-coffre__video{ object-fit: cover; }
}

/* Image de secours (mouvement réduit, erreur vidéo, économie de données) */
.of-coffre__still{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voiles de lisibilité */
.of-coffre__veil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,10,14,0.55) 0%, rgba(6,10,14,0) 34%),
    linear-gradient(0deg, rgba(6,10,14,0.68) 0%, rgba(6,10,14,0) 42%);
}

/* Calques de texte */
.of-coffre__layer{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  /* La marge basse laisse passer le bandeau de langue existant du site
     (barre fixe, bas de page, centrée). */
  padding: 0 clamp(20px, 5vw, 64px)
           calc(clamp(76px, 13vh, 132px) + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--font-display, 'Sentient', Times, serif);
  color: #fff;
}

.of-coffre__fade{
  opacity: 0;
  visibility: hidden;                    /* retire aussi du parcours clavier */
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(0.22,0.61,0.36,1),
              transform 520ms cubic-bezier(0.22,0.61,0.36,1),
              visibility 0s linear 520ms;
}
.of-coffre__fade[data-on="1"]{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* 1. Amorce */
.of-coffre__intro{ pointer-events: none; }
.of-coffre__eyebrow{
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0;
}
.of-coffre__lead{
  font-weight: 200;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.12;
  margin: 16px 0 0;
  max-width: 18ch;
}
.of-coffre__hint{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.of-coffre__hint::after{
  content: "";
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0));
  animation: ofCoffreHint 2200ms ease-in-out infinite;
}
@keyframes ofCoffreHint{
  0%,100%{ transform: scaleY(0.4); transform-origin: top; opacity: 0.35 }
  50%{ transform: scaleY(1); transform-origin: top; opacity: 1 }
}

/* 2. Repères de galerie */
.of-coffre__tags{ pointer-events: none; }
.of-coffre__tag{
  position: absolute;
  bottom: calc(clamp(26px, 5vh, 54px) + env(safe-area-inset-bottom, 0px));
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}
.of-coffre__tag--left{ left: clamp(20px, 5vw, 72px); }
.of-coffre__tag--right{ right: clamp(20px, 5vw, 72px); }
.of-coffre__tag::before{
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--offer-carnival-red, #ba1120);
  margin-bottom: 9px;
}
.of-coffre__tag--right::before{ margin-left: auto; }
@media (max-width: 600px){
  .of-coffre__tag{
    font-size: 8.5px;
    letter-spacing: 0.2em;
    /* au-dessus du bandeau de langue, qui occupe toute la largeur ici */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* 3. Appel à l'action final */
.of-coffre__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 15px 34px;
  border: 1px solid rgba(255,255,255,0.42);
  background: rgba(6,10,14,0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 320ms ease, border-color 320ms ease;
}
.of-coffre__cta:hover{
  background: var(--offer-carnival-red, #ba1120);
  border-color: var(--offer-carnival-red, #ba1120);
  opacity: 1;
}
.of-coffre__cta:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.of-coffre__ctaWrap{
  pointer-events: none;
  padding-bottom: calc(clamp(104px, 18vh, 184px) + env(safe-area-inset-bottom, 0px));
}
.of-coffre__ctaWrap[data-on="1"]{ pointer-events: auto; }
.of-coffre__ctaNote{
  display: block;
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* Lien « Passer l'animation » — toujours accessible */
.of-coffre__skip{
  position: absolute;
  top: calc(18px + env(safe-area-inset-top, 0px));
  right: calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-right, 0px));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-display, 'Sentient', Times, serif);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.66);
}
.of-coffre__skip:hover{ color: #fff; opacity: 1 }
.of-coffre__skip:focus-visible{ outline: 2px solid #fff; outline-offset: 2px }

/* Description textuelle du service, lue par les lecteurs d'écran */
.of-coffre__sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------- Version statique accessible ------- */
#of-coffre.of-coffre--static{
  height: auto;
  min-height: 0;
}
.of-coffre--static .of-coffre__scene{
  position: relative;
  height: min(78svh, 620px);
  background-image: none;
}
.of-coffre--static .of-coffre__video,
.of-coffre--static .of-coffre__intro,
.of-coffre--static .of-coffre__tags{ display: none }
.of-coffre--static .of-coffre__fade{
  opacity: 1; visibility: visible; transform: none;
}
.of-coffre--static .of-coffre__ctaWrap{ pointer-events: auto }

/* Repli sans JavaScript : la section reste une image + un bouton */
.of-coffre--nojs .of-coffre__skip{ display: none }