/*--------------------------------------------------------
  VARIABLES GLOBALES
--------------------------------------------------------*/
:root {
  --header-height: 80px;
  --container-width: 100%;
  --gap: 20px;
  --zyggy-offset: 0px;
  --intro-scale-start: 0.5;
  --intro-scale-end: 0.85;
  --intro-duration: 0.6s;
  --step-duration: 0.6s;
  --step-delay-increment: 0.2s;
  --coffre-duration: 0.3s;
  --shift-duration: 0.3s;
  --concl-duration: 0.6s;
}

/*--------------------------------------------------------
  STYLES DE BASE
--------------------------------------------------------*/
#process {
  position: relative;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

#process .process-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
    overflow: hidden;
}
#process .process-bg img:not(.cadre-veg) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
#process .cadre-veg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(1);
  z-index: 2;
}

#process .process-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
}

#process .process-intro {
  position: absolute;
  top: 37%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--intro-scale-start));
  opacity: 0;
  transition:
    transform var(--intro-duration) ease-out,
    opacity var(--intro-duration) ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 3;
  pointer-events: auto;
}

#process .motion-overlay {
  position: absolute;
  top: calc(50% + (var(--intro-scale-end) * 0.5 * 100%) + 20px);
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  padding: 1rem;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--intro-duration) ease-out;
}
#process .motion-overlay .btn {
  margin: 10px;
  opacity: 1;
  transition: opacity var(--intro-duration) ease-out;
}

#process .motion-zyggy {
  position: absolute;
  left: calc(-1 * var(--zyggy-offset));
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  animation: zyggyIn var(--intro-duration) ease-out forwards;
}

#process .process-steps {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  width: 45%;
  max-width: var(--container-width);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}
#process .step {
  text-align: left;
  transform: translateY(20px) scale(0.9);
  opacity: 0;
  transition:
    transform var(--step-duration) ease-out,
    opacity var(--step-duration) ease-out;
  background-color: #2d435b;            /* bleu très foncé */
  color: #fff;                          /* texte blanc */
  border: 1px solid rgba(255,255,255,0.6);  /* léger contour clair */
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);    /* ombrage discret */
  padding: 1.5rem;
}
/* Centrer l'image dans la carte */
#process .step img {
  display: block;
  margin: 0 auto 1rem;  /* centré horizontalement + marge dessous */
}

/* Titres des steps : on réserve un encart noir pour le numéro */
#process .step h3 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Encadré noir pour le numéro.
   Pour que ça fonctionne, entoure le "#1" de ta HMTL ainsi :
   <h3><span class="step-number">#1</span> Briefing</h3>
*/
#process .step .step-number {
  background-color: #000;
  color: #fff;
  padding: 0.2rem 0.6rem;
  font-weight: bold;
  flex-shrink: 0;
}

/* Texte des paragraphes */
#process .step p {
  margin: 0;
  line-height: 1.4;
}
#process .process-conclusion {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 600px;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
#process .motion-ile {
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 100%;
  opacity: 1;
  z-index: 2;
}
#process .coffre-closed,
#process .coffre-opened {
  position: absolute;
  bottom: 190px;
  right: 0;
  width: 180px;
  height: auto;
  z-index: 6;
  transition: opacity var(--coffre-duration) ease-out;
}
#process .coffre-closed { opacity: 1; }
#process .coffre-opened { opacity: 0; }

#process .btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--concl-duration) ease-out;
}

/*--------------------------------------------------------
  ÉTAT INTRO
--------------------------------------------------------*/
#process[data-state="intro"] .process-intro {
  transform: translate(-50%, -50%) scale(var(--intro-scale-end));
  opacity: 1;
  margin: auto;
}
#process[data-state="intro"] .motion-overlay {
  opacity: 1;
  visibility: visible;
}
#process[data-state="intro"] .motion-overlay .btn {
  pointer-events: auto;
  cursor: pointer;
}
#process[data-state="intro"] .motion-zyggy {
  bottom: 20px !important;
  transform: scale(1.2);
  opacity: 1;
}
#process[data-state="intro"] .cadre-veg {
  transform: scale(1.3);
  top: 0px;
}
#process[data-state="intro"] .process-steps,
#process[data-state="intro"] .process-conclusion,
#process[data-state="intro"] .motion-ile {
  opacity: 0;
  pointer-events: none;
}
/*--------------------------------------------------------
  ÉTAT ANIMATION
--------------------------------------------------------*/
#process[data-state="animation"] .process-intro {
  position: absolute;
  top: 20px;
  left: 20px;
  transform-origin: top left;
  transform: scale(0.5);
  opacity: 1;
  pointer-events: none;
  transition:
    transform var(--intro-duration) ease-out,
    top var(--intro-duration) ease-out,
    left var(--intro-duration) ease-out;
}
#process[data-state="animation"] .motion-overlay {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--intro-duration) ease-out,
    visibility 0s var(--intro-duration) ease-out;
}
#process[data-state="animation"] .motion-zyggy {
  bottom: -120px;
  left: 0;
  transform: translateY(0) scale(1);
  opacity: 1;
}
#process[data-state="animation"] .cadre-veg {
  transform: scale(1);
  transition: transform var(--shift-duration) ease-in;
  opacity: 1;
  top: 0;
}
#process[data-state="animation"] .process-steps {
  opacity: 1;
  pointer-events: auto;
}
#process[data-state="animation"] .step {
  transform: translateY(0) scale(1);
  opacity: 1;
}
#process[data-state="animation"] .step:nth-child(n) {
  transition-delay: calc(var(--step-delay-increment) * (n - 1));
}
#process[data-state="animation"] .process-conclusion {
  opacity: 0;
  pointer-events: none;
}
/*--------------------------------------------------------
  Ajustement Cascade des steps
--------------------------------------------------------*/
/* 1) Appliquer un delay individuel à chaque carte */
#process[data-state="animation"] .step:nth-child(1) {
  transition-delay: calc(var(--step-delay-increment) * 0);
}
#process[data-state="animation"] .step:nth-child(2) {
  transition-delay: calc(var(--step-delay-increment) * 1);
}
#process[data-state="animation"] .step:nth-child(3) {
  transition-delay: calc(var(--step-delay-increment) * 2);
}
#process[data-state="animation"] .step:nth-child(4) {
  transition-delay: calc(var(--step-delay-increment) * 3);
}
#process[data-state="animation"] .step:nth-child(5) {
  transition-delay: calc(var(--step-delay-increment) * 4);
}
#process[data-state="animation"] .step:nth-child(6) {
  transition-delay: calc(var(--step-delay-increment) * 5);
}

/* 2) S’assurer qu’en fin d’animation elles restent en place */
#process[data-state="end"] .process-steps {
  opacity: 1 !important;
  pointer-events: auto !important;
}
#process[data-state="end"] .step {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  transition-delay: 0 !important;  /* plus de delay, déjà apparues */
}

/*--------------------------------------------------------
  ÉTAT END
--------------------------------------------------------*/
#process[data-state="end"] .motion-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
}
#process[data-state="end"] .process-intro {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  transform-origin: top left;
  transform: scale(0.5) !important;
  opacity: 1 !important;
  transition: none !important;
}
#process[data-state="end"] .process-conclusion {
  animation: slideInRight var(--concl-duration) ease-out forwards;
  opacity: 1;
  pointer-events: auto;
  }
#process[data-state="end"] .coffre-closed {
  opacity: 1;
  transition: opacity var(--coffre-duration) ease-out var(--concl-duration);
}
#process[data-state="end"] .coffre-closed {
  opacity: 0;
}
#process[data-state="end"] .coffre-opened {
  opacity: 0;
  transition: opacity var(--coffre-duration) ease-in 
              calc(var(--concl-duration) + var(--coffre-duration));
}
#process[data-state="end"] .coffre-opened {
  opacity: 1;
}

#process[data-state="end"] #btn-conclusion{
 display: flex;             /* pour ses deux boutons */
  justify-content: right;   /* centre horizontalement les boutons */
  width: 100%;               /* prend toute la largeur du parent */
  margin: 0 auto;            /* centre le bloc dans le parent */
}
#process[data-state="end"] .btn {
  opacity: 1;
  position: relative; /* nécessaire pour que z-index fonctionne */
  z-index: 7 !important; /* au-dessus des coffres (z-index:6) */
  pointer-events: auto;
  cursor: pointer;
  transition-delay: calc(var(--step-delay-increment) * 3);
  margin: 10px;
}

/* Même bottom que dans l’animation (moment du clic) */
#process[data-state="end"]   .motion-zyggy {
  bottom: -120px !important;
}
/*--------------------------------------------------------
  KEYFRAMES
--------------------------------------------------------*/
@keyframes zyggyIn {
  from {
    transform: translateX(0) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateX(var(--zyggy-offset)) scale(0.9);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes chestBounce {
  0%   { transform: scale(0.95); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/*--------------------------------------------------------
  Swap instantané Coffre fermé ? Coffre ouvert + bounce
  (pas de fondu, juste une image après l’autre)
--------------------------------------------------------*/
/* 1) On supprime toute transition d’opacité existante */
#process .coffre-closed,
#process .coffre-opened {
  transition: none !important;
}

/* 2) À l’état END, on déclenche un keyframe 0s après --concl-duration */
#process[data-state="end"] .coffre-closed {
  /* reste visible puis disparaît d’un coup */
  animation: chestSwapClosed 0s steps(1,end) var(--concl-duration) forwards;
}
#process[data-state="end"] .coffre-opened {
  /* apparaît d’un coup, puis fait un bounce */
  animation:
    chestSwapOpen    0s steps(1,end) var(--concl-duration) forwards,
    chestBounce     var(--coffre-duration) ease-out var(--concl-duration) forwards;
}

/* 3) Keyframes pour swap instantané */
@keyframes chestSwapClosed {
  to { opacity: 0; }
}
@keyframes chestSwapOpen {
  to { opacity: 1; }
}

/* 4) Keyframes bounce (léger zoom) */
@keyframes chestBounce {
  0%   { transform: scale(0.95); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/*--------------------------------------------------------
  Swap instantané Coffre fermé ? Coffre ouvert 
  avec bounce In ? Swap ? bounce Out, 1.5s après l’arrivée
--------------------------------------------------------*/
/* 0) On annule toute transition/animation héritée */
#process .coffre-closed,
#process .coffre-opened {
  transition: none !important;
  animation: none !important;
}

/* 1) Coffre fermé : bounce in */
#process[data-state="end"] .coffre-closed {
  animation: 
    chestBounceIn var(--coffre-duration) ease-out var(--concl-duration) forwards,
    chestSwapClosed 0s steps(1,end) calc(var(--concl-duration) + var(--coffre-duration) + 1.5s) forwards;
}

/* 2) Coffre ouvert : swap + bounce out */
#process[data-state="end"] .coffre-opened {
  animation:
    chestSwapOpen 0s steps(1,end) calc(var(--concl-duration) + var(--coffre-duration) + 1.5s) forwards,
    chestBounceOut var(--coffre-duration) ease-in calc(var(--concl-duration) + var(--coffre-duration) + 1.5s) forwards;
}

/* Keyframes pour l’effet bounce avant l’open */
@keyframes chestBounceIn {
  0%   { transform: scale(0.8); opacity: 1; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Keyframes pour l’effet bounce après l’open */
@keyframes chestBounceOut {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Keyframes pour le swap instantané (opacity) */
@keyframes chestSwapClosed {
  to { opacity: 0; }
}
@keyframes chestSwapOpen {
  to { opacity: 1; }
}