@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}

::-webkit-scrollbar { display: none; }

[x-cloak] { display: none !important; }

@keyframes hibook-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: hibook-marquee 32s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

.faq-icon.is-open {
  transform: rotate(45deg);
}

/* ===== Cockpit : mouvement (landing) ===== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Allumage du cockpit : animation CSS au chargement (le H1 reste visible) */
@keyframes ck-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ck-rise {
  animation: ck-rise 500ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

/* Apparition au défilement (classe posée seulement si le JS tourne) */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Anneau 360° : rotation lente, en pause hors écran */
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-ring { animation: ck-spin 60s linear infinite; transform-origin: 50% 50%; }
.ck-ring.is-paused { animation-play-state: paused; }

/* Alertes IQ : glissent une à une */
@keyframes ck-alert-in {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: none; }
}
.js .ck-alert { opacity: 0; }
.js .is-in .ck-alert, .js .ck-alert.is-in {
  animation: ck-alert-in 300ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 1200ms * 0.5);
}

/* Chiffres : largeur fixe pendant la montée */
[data-count] { font-variant-numeric: tabular-nums; }

/* Voyant « en direct » : pulsation douce */
@keyframes ck-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ck-live { animation: ck-pulse 2.4s var(--ease-in-out) infinite; }

/* Retour sur les boutons */
a.ck-press, button.ck-press {
  transition: transform 160ms var(--ease-out), background-color 160ms ease, opacity 160ms ease;
}
a.ck-press:active, button.ck-press:active { transform: scale(0.97); }

/* Halo qui suit le curseur : souris uniquement */
.ck-halo { position: relative; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ck-halo::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,107,74,.16), transparent 70%);
    transition: opacity 200ms ease;
  }
  .ck-halo:hover::before { opacity: 1; }
}

/* Réduire les animations : plus doux, pas supprimé */
@media (prefers-reduced-motion: reduce) {
  .ck-rise { animation: ck-fade 300ms ease both; animation-delay: 0s; }
  .js .reveal { transform: none; transition: opacity 300ms ease; transition-delay: 0s; }
  .ck-ring, .ck-live, .animate-marquee { animation: none; }
  .js .ck-alert { opacity: 1; }
  .js .is-in .ck-alert, .js .ck-alert.is-in { animation: ck-fade 300ms ease both; animation-delay: 0s; }
  a.ck-press:active, button.ck-press:active { transform: none; }
}
@keyframes ck-fade { from { opacity: 0; } to { opacity: 1; } }

/* ===== Cockpit : profondeur 3D ===== */
.ck-scene { perspective: 1400px; }
.ck-tilt {
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 4deg));
  transition: transform 300ms var(--ease-out);
  will-change: transform;
}
.ck-z1 { translate: 0 0 40px; }
.ck-z2 { translate: 0 0 80px; }
.ck-z3 { translate: 0 0 60px; }

/* Orbites : anneaux inclinés qui tournent autour du cockpit */
.ck-orbit { transform-style: preserve-3d; display: flex; align-items: center; justify-content: center; }
.ck-orbit-ring {
  position: absolute; border-radius: 9999px; transform-style: preserve-3d;
  border: 1.5px dashed rgba(79, 219, 200, .75); box-shadow: 0 0 24px rgba(79, 219, 200, .12);
  animation: ck-orbit 38s linear infinite;
}
.ck-orbit-ring i {
  position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 9999px;
  background: #4fdbc8; box-shadow: 0 0 14px 3px rgba(79, 219, 200, .7);
}
.ck-o1 { width: 118%; aspect-ratio: 1; --tilt: 72deg; }
.ck-o2 { width: 96%; aspect-ratio: 1; --tilt: 64deg; border-color: rgba(255, 107, 74, .8); animation-duration: 26s; animation-direction: reverse; }
.ck-o2 i { background: #ff6b4a; box-shadow: 0 0 14px 3px rgba(255, 107, 74, .7); }
.ck-o3 { width: 140%; aspect-ratio: 1; --tilt: 78deg; border-color: rgba(255, 255, 255, .3); animation-duration: 54s; }
.ck-o3 i { background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .5); }
@keyframes ck-orbit {
  from { transform: rotateX(var(--tilt)) rotateZ(0deg); }
  to { transform: rotateX(var(--tilt)) rotateZ(360deg); }
}

/* Cadrans : l'aiguille balaie jusqu'à sa valeur */
.ck-needle { transform-origin: 100px 100px; transform: rotate(-120deg); }
.js .ck-dial .ck-needle { transition: transform 1100ms var(--ease-out); transition-delay: 250ms; }
.ck-dial.is-in .ck-needle, .ck-dial .ck-needle { transform: rotate(var(--a)); }
.js .ck-dial:not(.is-in) .ck-needle { transform: rotate(-120deg); }

@media (prefers-reduced-motion: reduce) {
  .ck-tilt { transform: none; transition: none; }
  .ck-orbit-ring { animation: none; transform: rotateX(var(--tilt)); }
  .js .ck-dial .ck-needle { transition: none; transition-delay: 0s; }
  .js .ck-dial:not(.is-in) .ck-needle { transform: rotate(var(--a)); }
}
@media (max-width: 639px) {
  .ck-tilt { transform: none; }
  .ck-z1, .ck-z2, .ck-z3 { translate: none; }
  .ck-o1, .ck-o3 { display: none; }
}

/* ===== Flottement léger (profondeur conservée via translate) ===== */
@keyframes ck-float1 { 0%,100% { translate: 0 0 40px; } 50% { translate: 0 -6px 40px; } }
@keyframes ck-float2 { 0%,100% { translate: 0 0 80px; } 50% { translate: 0 -9px 80px; } }
@keyframes ck-float3 { 0%,100% { translate: 0 0 60px; } 50% { translate: 0 -10px 60px; } }
.ck-z1 { animation: ck-float1 5s var(--ease-in-out) infinite; }
.ck-z2 { animation: ck-float2 6.5s var(--ease-in-out) infinite; }
.ck-z3 { animation: ck-float3 7.5s var(--ease-in-out) infinite; }

/* ===== Cartes 3D au survol (souris) ===== */
.js .ck-halo.is-in {
  transform: perspective(800px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg));
  transition: opacity 500ms var(--ease-out), transform 200ms var(--ease-out);
  transition-delay: 0s;
}

/* ===== Courbe et barres qui se dessinent ===== */
.ck-draw { clip-path: inset(0 100% 0 0); transition: clip-path 1200ms var(--ease-out); }
.is-in .ck-draw, .ck-draw.is-in { clip-path: inset(0 0 0 0); }
.ck-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.ck-bar { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(#4fdbc8, #1f8f82);
  transform: scaleY(.04); transform-origin: bottom; transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i) * 60ms); }
.is-in .ck-bar { transform: scaleY(1); }
.ck-bar:nth-child(6) { background: linear-gradient(#ff6b4a, #b8402a); }

/* ===== Radar 360 + boussole ===== */
.ck-radar-disc { position: absolute; inset: 14%; border-radius: 9999px; overflow: hidden;
  background: radial-gradient(circle, rgba(79,219,200,.12) 0, transparent 70%),
    repeating-radial-gradient(circle, transparent 0 22%, rgba(255,255,255,.1) 22% 22.6%),
    #0e1628;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 60px rgba(79,219,200,.1); }
.ck-radar-disc::before, .ck-radar-disc::after { content: ""; position: absolute; background: rgba(255,255,255,.08); }
.ck-radar-disc::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.ck-radar-disc::after { top: 50%; left: 0; right: 0; height: 1px; }
.ck-sweep { position: absolute; inset: 0; border-radius: 9999px;
  background: conic-gradient(from 0deg, rgba(79,219,200,0) 0deg, rgba(79,219,200,0) 270deg, rgba(79,219,200,.42) 360deg);
  animation: ck-spin 6s linear infinite; }
@keyframes ck-blip { 0% { opacity: 1; transform: translate(-50%,-50%) scale(1.8); } 25% { opacity: .9; transform: translate(-50%,-50%) scale(1.2); } 100% { opacity: .18; transform: translate(-50%,-50%) scale(1); } }
.ck-blip { position: absolute; width: 10px; height: 10px; border-radius: 9999px; background: #ff6b4a; box-shadow: 0 0 12px 3px rgba(255,107,74,.7);
  transform: translate(-50%,-50%); opacity: .18; animation: ck-blip 6s linear infinite; animation-delay: var(--d); }
.ck-pointer { position: absolute; left: 50%; top: 50%; width: 2px; height: 50%; margin-left: -1px; transform-origin: top center;
  transform: rotate(calc(var(--a) + 180deg)); transition: transform 450ms var(--ease-in-out);
  background: linear-gradient(#ff6b4a, rgba(255,107,74,0)); }
.ck-core { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 9999px; background: #0c1322; border: 3px solid #ff6b4a; }
.ck-sector { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 64px; min-height: 44px; padding: 6px 10px; border-radius: 14px; font-size: 12px; font-weight: 600; color: #c2c8d8;
  background: rgba(20,28,46,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.ck-sector[aria-pressed="true"] { color: #0c1322; background: #4fdbc8; box-shadow: 0 0 0 1px #4fdbc8, 0 10px 24px -6px rgba(79,219,200,.5); }
@media (hover: hover) and (pointer: fine) { .ck-sector:hover:not([aria-pressed="true"]) { background: rgba(40,52,78,.95); } }
.ck-panel [data-p] { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.ck-panel.is-swap [data-p] { opacity: 0; transform: translateY(6px); }

/* ===== Hôtel isométrique ===== */
.ck-iso { display: flex; justify-content: center; min-height: 420px; align-items: center; }
.ck-iso-fit { width: 380px; height: 290px; position: relative; transform-origin: center; }
.ck-iso-board { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px;
  transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); }
.ck-room { position: relative; min-height: 70px; border-radius: 10px; transform-style: preserve-3d; --h: 14px; --c: #4fdbc8;
  background: var(--c); translate: 0 0 0; opacity: .0;
  transition: translate 600ms var(--ease-out), opacity 400ms var(--ease-out), box-shadow 200ms ease; transition-delay: calc(var(--i) * 50ms), calc(var(--i) * 50ms), 0s; }
.ck-room::before { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(0,0,0,.5); translate: 0 0 calc(var(--h) * -1); filter: blur(4px); }
.ck-room[data-state="occ"] { --c: #ff6b4a; --h: 26px; }
.ck-room[data-state="clean"] { --c: #8a93a8; --h: 12px; }
.ck-room[data-state="arr"] { --c: rgba(255,180,163,.18); --h: 18px; box-shadow: inset 0 0 0 2px #ffb4a3; }
.is-in .ck-room { opacity: 1; translate: 0 0 var(--h); }
.ck-room.is-hot { box-shadow: inset 0 0 0 3px rgba(255,255,255,.95), 0 0 26px 6px var(--c); }
.ck-pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; translate: 0 0 60px; opacity: 0; transition: opacity 200ms var(--ease-out);
  transform: rotateZ(40deg) rotateX(-58deg); }
.ck-pin span { position: absolute; bottom: 4px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: #0c1322;
  background: #fff; padding: 3px 8px; border-radius: 9999px; box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.ck-room.is-hot .ck-pin { opacity: 1; }
.ck-lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.ck-iso-alerts li { transition: box-shadow 200ms var(--ease-out), background-color 200ms ease; }
.ck-iso-alerts li.is-hot { box-shadow: 0 0 0 1.5px #ff6b4a; background: rgba(255,107,74,.08); }
@media (max-width: 639px) { .ck-iso { min-height: 320px; } .ck-iso-fit { transform: scale(.78); } }

/* ===== Journée 7h -> 22h (défilement normal, élément collant) ===== */
.ck-day { height: 420vh; }
.ck-day-stick { position: sticky; top: 72px; height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; }
.ck-sky { position: absolute; inset: 0; pointer-events: none; }
.ck-sky-night { background: radial-gradient(ellipse at 70% 0%, rgba(79,219,200,.16), transparent 60%), linear-gradient(#0c1322, #05080f); opacity: var(--night, 0); }
.ck-clock { font-family: Bricolage Grotesque, Inter, sans-serif; font-weight: 700; font-size: clamp(56px, 9vw, 104px); line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; background: linear-gradient(90deg, #ff6b4a, #ffd1c4 50%, #4fdbc8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ck-steps { position: relative; min-height: 190px; }
.ck-step { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); }
.ck-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ck-step-h { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #4fdbc8; }
.ck-dots { display: flex; gap: 8px; justify-content: center; }
@media (min-width: 768px) { .ck-dots { justify-content: flex-start; } }
.ck-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.2); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.ck-dot.is-on { background: #ff6b4a; transform: scale(1.4); }
.ck-progress { height: 3px; border-radius: 9999px; background: rgba(255,255,255,.1); overflow: hidden; }
.ck-progress i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b4a, #4fdbc8); transform: scaleX(0); transform-origin: left; }
/* version statique : mobile et « réduire les animations » */
.ck-day.is-static { height: auto; padding: 64px 0; }
.ck-day.is-static .ck-day-stick { position: static; height: auto; }
.ck-day.is-static .ck-steps { min-height: 0; display: grid; gap: 24px; }
.ck-day.is-static .ck-step { position: static; opacity: 1; transform: none; pointer-events: auto; }
.ck-day.is-static .ck-clock, .ck-day.is-static .ck-dots, .ck-day.is-static .ck-progress { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ck-z1, .ck-z2, .ck-z3 { animation: none; }
  .ck-sweep, .ck-blip { animation: none; }
  .ck-blip { opacity: .9; }
  .ck-draw { transition: opacity 300ms ease; clip-path: none; opacity: 0; }
  .is-in .ck-draw, .ck-draw.is-in { opacity: 1; }
  .ck-bar { transition: opacity 300ms ease; transform: none; opacity: 0; }
  .is-in .ck-bar { opacity: 1; }
  .ck-room { transition: opacity 300ms ease; translate: 0 0 var(--h); transition-delay: 0s; }
  .ck-pointer { transition: none; }
  .ck-panel [data-p] { transition: opacity 200ms ease; transform: none !important; }
  .js .ck-halo.is-in { transform: none; }
}

/* ===== Hibook : volume (direction C) ===== */
a.bg-primary-container,button.bg-primary-container{background-image:linear-gradient(180deg,#FBBFA3,#F4A988)!important;color:#14283F!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 5px 0 #D98560,0 16px 22px -8px rgba(30,58,95,.5)!important;transition:transform .12s ease,box-shadow .12s ease}
a.bg-primary-container:hover,button.bg-primary-container:hover{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 #D98560,0 10px 16px -8px rgba(30,58,95,.5)!important}
.bg-surface-container-lowest,.bg-surface-container-low,.bg-surface-container{box-shadow:inset 0 1px 0 #fff,0 18px 30px -22px rgba(30,58,95,.35)}
h1,h2,h3{letter-spacing:-.025em}