/* Intro de marque construite à partir du cube du logo :
   1. les trois faces (chaud, froid, maintenance) s'assemblent en grand au centre ;
   2. le cube rejoint sa place dans le logo pendant que le nom se révèle ;
   3. à la sortie, l'écran se divise le long des arêtes du cube et ses faces
      s'écartent pour découvrir le site, qui s'anime en même temps. */
.site-entry { display: none; }
.entry-pending .site-entry {
  --entry-x: 0;
  --entry-y: 0;
  --entry-ease: cubic-bezier(.16, 1, .3, 1);
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #10162d;
  isolation: isolate;
  perspective: 1200px;
  animation: entry-safety 0s 5.6s forwards;
}

/* ── Faces de fond : un écran uni tant que l'intro joue ── */
.site-entry-panels { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.site-entry-panel {
  position: absolute;
  inset: 0;
  display: block;
  background: #f8fafb;
  transform-origin: 50% 52%;
  will-change: transform;
}
.site-entry-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
/* Légers chevauchements pour qu'aucune ligne du site ne filtre entre les faces. */
.site-entry-panel--heat { clip-path: polygon(50.15% 52%, 50.15% 0, 0 0, 0 100.3%); }
.site-entry-panel--cold { clip-path: polygon(49.85% 52%, 49.85% 0, 100% 0, 100% 100.3%); }
.site-entry-panel--tech { clip-path: polygon(50% 51.6%, 100% 99.7%, 100% 100%, 0 100%, 0 99.7%); }
.site-entry-panel--heat::after { background: linear-gradient(115deg, transparent 40%, #fbe9dd); }
.site-entry-panel--cold::after { background: linear-gradient(245deg, transparent 40%, #dff0f9); }
.site-entry-panel--tech::after { background: linear-gradient(0deg, transparent 30%, #eef5e0); }

/* ── Profondeur : cubes filaires sur plusieurs plans, parallaxe au pointeur ── */
.site-entry-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.site-entry-light {
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at 30% 30%, #d8ecf5 0%, transparent 46%), radial-gradient(ellipse at 80% 80%, #f4e8dc 0%, transparent 45%);
  animation: entry-light 3.2s ease-out both;
}
.site-entry-depth {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform .8s var(--entry-ease);
}
.site-entry-depth--far { transform: translate3d(calc(var(--entry-x) * -10px), calc(var(--entry-y) * -8px), 0); }
.site-entry-depth--mid { transform: translate3d(calc(var(--entry-x) * -24px), calc(var(--entry-y) * -18px), 0); }
.site-entry-wire { overflow: visible; }
.site-entry-wire--far {
  width: 150vmax;
  opacity: .5;
  animation: entry-wire-far 3.6s var(--entry-ease) both;
}
.site-entry-wire--mid {
  width: min(92vmin, 880px);
  animation: entry-wire-mid 2.6s .1s var(--entry-ease) both;
}
.site-entry-wire-line {
  fill: none;
  stroke: #9fb3c2;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: entry-draw 1.8s .15s cubic-bezier(.65, 0, .35, 1) forwards;
}
.site-entry-wire-line { opacity: .55; }
.site-entry-wire-line--inner { animation-delay: .55s; opacity: .35; }
.site-entry-wire-face { opacity: 0; animation: entry-face-tint 1.6s .7s ease-out forwards; }
.site-entry-wire-face--heat { fill: #f47a3a0d; }
.site-entry-wire-face--cold { fill: #55b9e510; }
.site-entry-wire-face--tech { fill: #9cbd5112; }
.site-entry-wire--far .site-entry-wire-face { display: none; }


/* ── Contenu central ── */
.site-entry-center {
  width: min(560px, calc(100vw - 56px));
  text-align: center;
  transform: translate3d(calc(var(--entry-x) * 9px), calc(var(--entry-y) * 7px), 0) rotateY(calc(var(--entry-x) * 2deg));
  transition: transform .7s var(--entry-ease);
}
.site-entry-eyebrow {
  margin: 0 0 38px;
  color: #53647a;
  font: 400 10px/1.5 var(--font-body, sans-serif);
  letter-spacing: .23em;
  text-transform: uppercase;
  animation: entry-copy .85s 1.75s both;
}

/* Le logo : le nom (image) + le cube vectoriel superposé exactement à sa place.
   Coordonnées issues de logo-sans-numero.svg (viewBox 481.82 × 75.82). */
.site-entry-mark { position: relative; margin: 12px 0; }
.site-entry-logo {
  display: block;
  width: 100%;
  height: auto;
  clip-path: inset(0 0 0 15.2%);
  animation: entry-wordmark 1s 1.5s cubic-bezier(.65, 0, .2, 1) both;
}
.site-entry-cube {
  position: absolute;
  left: .96%;
  top: .67%;
  width: 12.89%;
  height: 90.5%;
  z-index: 1;
  animation: entry-cube-dock 1.05s 1.15s cubic-bezier(.7, 0, .2, 1) both;
}
.site-entry-cube svg { display: block; width: 100%; height: 100%; overflow: visible; }
.site-entry-face {
  transform-box: fill-box;
  transform-origin: center;
  animation: .95s var(--entry-ease) both;
}
.site-entry-face--heat { animation-name: entry-face-heat; animation-delay: .1s; }
.site-entry-face--cold { animation-name: entry-face-cold; animation-delay: .24s; }
.site-entry-face--tech { animation-name: entry-face-tech; animation-delay: .38s; }
.site-entry-cube-ring {
  fill: none;
  stroke: #0875b5;
  stroke-width: .4;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: entry-ring 1.1s .95s ease-out both;
}

.site-entry-statement {
  margin: 34px 0 0;
  font: 400 clamp(26px, 3.1vw, 44px)/1.2 var(--font-body, sans-serif);
  letter-spacing: -.045em;
}
.site-entry-statement span { display: inline-block; animation: entry-statement 1.1s var(--entry-ease) both; }
.site-entry-statement span:first-child { animation-delay: 1.9s; }
.site-entry-statement span:last-child { animation-delay: 2.05s; color: #0875b5; }
.site-entry-services {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 4vw, 42px);
  margin: 26px 0 0;
  color: #53647a;
  font: 400 10px/1.5 var(--font-body, sans-serif);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.site-entry-services span { animation: entry-copy .7s both; }
.site-entry-services span:nth-child(1) { animation-delay: 2.15s; }
.site-entry-services span:nth-child(2) { animation-delay: 2.27s; }
.site-entry-services span:nth-child(3) { animation-delay: 2.39s; }
.site-entry-line { display: flex; height: 2px; margin: 30px auto 0; width: 180px; overflow: hidden; }
.site-entry-line i { flex: 1; transform-origin: left; animation: entry-line .9s cubic-bezier(.22, 1, .36, 1) both; }
.site-entry-line i:nth-child(1) { background: #55b9e5; animation-delay: 2.1s; }
.site-entry-line i:nth-child(2) { background: #f47a3a; animation-delay: 2.25s; }
.site-entry-line i:nth-child(3) { background: #9cbd51; animation-delay: 2.4s; }
.site-entry-skip {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: max(28px, env(safe-area-inset-bottom));
  padding: 12px 0 12px 16px;
  border: 0;
  background: transparent;
  color: #53647a;
  font: 400 10px/1.5 var(--font-body, sans-serif);
  letter-spacing: .12em;
  cursor: pointer;
  transition: opacity .3s ease;
}
.site-entry-skip span { margin-left: 18px; }
.site-entry-skip:hover { color: #10162d; }
.site-entry-skip:focus-visible { outline: 1px solid #0875b5; outline-offset: 5px; }

/* ── Sortie : on traverse le cube, ses faces s'ouvrent sur le site ── */
.entry-pending .site-entry.is-leaving {
  animation: entry-exit 1.15s linear forwards;
  pointer-events: none;
}
.site-entry.is-leaving .site-entry-panel { animation: 1.1s .12s cubic-bezier(.7, 0, .2, 1) forwards; }
.site-entry.is-leaving .site-entry-panel::after { opacity: 1; }
.site-entry.is-leaving .site-entry-panel--heat { animation-name: entry-open-heat; }
.site-entry.is-leaving .site-entry-panel--cold { animation-name: entry-open-cold; }
.site-entry.is-leaving .site-entry-panel--tech { animation-name: entry-open-tech; }
.site-entry.is-leaving .site-entry-center { animation: entry-through .75s cubic-bezier(.5, 0, .75, 0) forwards; }
.site-entry.is-leaving .site-entry-atmosphere { animation: entry-atmosphere-out .8s ease-in forwards; }
.site-entry.is-leaving .site-entry-skip { opacity: 0; }

@keyframes entry-face-heat { from { opacity: 0; transform: translate(-120%, -55%) rotate(-14deg) scale(1.5); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes entry-face-cold { from { opacity: 0; transform: translate(120%, -55%) rotate(14deg) scale(1.5); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes entry-face-tech { from { opacity: 0; transform: translateY(130%) scale(1.5); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* Le cube naît au centre du logo, en grand (≈ 3,3 largeurs de cube vers la droite), puis se pose. */
@keyframes entry-cube-dock { from { transform: translateX(330%) scale(2.6); } to { transform: none; } }
@keyframes entry-ring { 0% { opacity: 0; transform: scale(1); } 12% { opacity: .7; } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes entry-wordmark { from { clip-path: inset(0 100% 0 15.2%); opacity: .2; } to { clip-path: inset(0 0 0 15.2%); opacity: 1; } }
@keyframes entry-copy { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes entry-statement { from { opacity: 0; transform: translateY(24px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes entry-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes entry-light { from { opacity: .3; transform: scale(1.15) translateX(-4%); } to { opacity: 1; transform: none; } }
@keyframes entry-draw { to { stroke-dashoffset: 0; } }
@keyframes entry-face-tint { to { opacity: 1; } }
@keyframes entry-wire-far { from { opacity: 0; transform: scale(1.25) rotate(-8deg); } to { opacity: .5; transform: rotate(0); } }
@keyframes entry-wire-mid { from { opacity: 0; transform: scale(.7) rotate(6deg); } to { opacity: 1; transform: none; } }
@keyframes entry-open-heat { to { transform: translate(-58%, -20%) rotate(-5deg); } }
@keyframes entry-open-cold { to { transform: translate(58%, -20%) rotate(5deg); } }
@keyframes entry-open-tech { to { transform: translateY(66%); } }
@keyframes entry-through { to { opacity: 0; transform: scale(1.4); filter: blur(8px); } }
@keyframes entry-atmosphere-out { to { opacity: 0; transform: scale(1.25); } }
@keyframes entry-exit { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes entry-safety { to { visibility: hidden; pointer-events: none; } }

/* ── Le site prend le relais pendant l'ouverture (fill « backwards » : aucune
      transformation ne subsiste ensuite, les scripts de défilement gardent la main) ── */
.entry-revealed .opening-curtain .study-copy > *,
.entry-revealed .study-mobile > * {
  animation: entry-site-rise 1.1s var(--entry-ease, cubic-bezier(.16, 1, .3, 1)) backwards;
}
.entry-revealed .opening-curtain .study-copy > :nth-child(1), .entry-revealed .study-mobile > :nth-child(1) { animation-delay: .35s; }
.entry-revealed .opening-curtain .study-copy > :nth-child(2), .entry-revealed .study-mobile > :nth-child(2) { animation-delay: .45s; }
.entry-revealed .opening-curtain .study-copy > :nth-child(3), .entry-revealed .study-mobile > :nth-child(3) { animation-delay: .55s; }
.entry-revealed .opening-curtain .study-copy > :nth-child(n+4), .entry-revealed .study-mobile > :nth-child(n+4) { animation-delay: .65s; }
.entry-revealed .study-register,
.entry-revealed .study-footer,
.entry-revealed .site-header { animation: entry-site-fade .9s .5s ease-out backwards; }
@keyframes entry-site-rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes entry-site-fade { from { opacity: 0; } }

@media (max-width: 600px) {
  .site-entry-eyebrow { font-size: 8px; letter-spacing: .16em; margin-bottom: 28px; }
  .site-entry-services { font-size: 9px; letter-spacing: .1em; gap: 20px; }
  .site-entry-statement { margin-top: 26px; }
  .site-entry-wire--mid { width: 120vmin; }
}
@media (max-height: 540px) {
  .site-entry-center { width: min(370px, calc(100vw - 80px)); }
  .site-entry-eyebrow { margin-bottom: 12px; }
  .site-entry-statement { margin-top: 10px; font-size: 26px; }
  .site-entry-services, .site-entry-line { margin-top: 16px; }
  .site-entry-skip { bottom: 12px; }
  @keyframes entry-cube-dock { from { transform: translateX(330%) scale(1.9); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .entry-pending .site-entry { display: none; }
}