/* Site public Krono (accueil + pages dédiées) : animations et quelques
   styles impossibles à exprimer en classes Tailwind. Les couleurs restent
   celles de tailwind.config (legal_base.html). */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Une scène = un écran. svh évite le saut de la barre d'adresse mobile. */
.scene { min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); }

/* ---------- Apparition au défilement ----------
   Réservée aux cartes et visuels : le texte (titres, paragraphes) s'affiche
   toujours immédiatement pour ne jamais faire attendre la lecture. Rapide et
   discrète, décalage entre cartes réduit à 40 % de --d. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--d, 0ms) * 0.4);
}
.js [data-reveal="left"] { transform: translateX(-16px); }
.js [data-reveal="right"] { transform: translateX(16px); }
.js [data-reveal="zoom"] { transform: scale(0.98); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
/* Une fois affichée, une carte retrouve son relief au survol sans délai. */
.js [data-reveal].is-visible.lift {
  transition: opacity 0.45s ease-out, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  transition-delay: 0ms;
}

/* ---------- Texte qui s'allume mot à mot ---------- */
.js [data-words] .w { opacity: 0.16; transition: opacity 0.35s ease; }
.js [data-words] .w.on { opacity: 1; }

/* ---------- Ligne qui se dessine ---------- */
.js [data-draw] path, .js [data-draw] line {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 0.8s cubic-bezier(0.6, 0.1, 0.2, 1);
}
.js [data-draw].is-visible path, .js [data-draw].is-visible line { stroke-dashoffset: 0; }

/* ---------- Étapes qui s'allument l'une après l'autre ---------- */
[data-steps] .step { transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }
.js [data-steps] .step { opacity: 0.32; }
.js [data-steps] .step.on { opacity: 1; }
[data-steps] .step .dot { transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
[data-steps] .step.on .dot { background: oklch(0.835 0.187 119); color: oklch(0.285 0.096 153); box-shadow: 0 0 0 6px oklch(0.835 0.187 119 / 0.25); }
[data-steps] .rail-fill { transition: height 0.3s ease-out, width 0.3s ease-out; }

/* ---------- Barre de délai (promis / livré) ---------- */
.js .late-bar { width: 0; transition: width 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.1s; }
.is-visible .late-bar { width: var(--w); }

/* ---------- Pouls "suivi en cours" ---------- */
.pulse { position: relative; }
.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid currentColor; opacity: 0; animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Scan qui balaie une ligne ---------- */
.scan { position: relative; overflow: hidden; }
.scan::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, oklch(0.835 0.187 119 / 0.28), transparent);
  animation: scan 3.2s ease-in-out infinite; animation-delay: var(--sd, 0s);
}
@keyframes scan { 0% { left: -40%; } 60%, 100% { left: 110%; } }

/* ---------- Légère flottaison des visuels ---------- */
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Cartes : relief au survol ---------- */
.lift { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px rgba(19, 42, 28, 0.35); }

/* ---------- En-tête : ombre une fois la page défilée ---------- */
#site-nav { transition: box-shadow 0.3s ease, background-color 0.3s ease; }
#site-nav.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45); }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: oklch(0.835 0.187 119); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- FAQ ---------- */
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.faq .faq-body > div { overflow: hidden; }
.faq.is-open .faq-body { grid-template-rows: 1fr; }
.faq .chev { transition: transform 0.35s ease; }
.faq.is-open .chev { transform: rotate(45deg); }

/* ---------- Calculateur : curseur ---------- */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 9999px; outline: none;
  background: linear-gradient(90deg, oklch(0.835 0.187 119) var(--p, 30%), oklch(0.912 0.037 135) var(--p, 30%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 9999px;
  background: oklch(0.285 0.096 153); border: 4px solid oklch(0.835 0.187 119); cursor: grab; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: oklch(0.285 0.096 153);
  border: 4px solid oklch(0.835 0.187 119); cursor: grab; }
.range:focus-visible { box-shadow: 0 0 0 4px oklch(0.835 0.187 119 / 0.35); }

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-steps] .step, .js [data-words] .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js [data-draw] path, .js [data-draw] line { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .late-bar { width: var(--w) !important; transition: none !important; }
  .pulse::after, .scan::before, .float { animation: none !important; }
}

/* ---------- Transparences : Tailwind (CDN) ne sait pas appliquer /NN aux
   couleurs oklch de la palette, d'où ces classes explicites. ---------- */
.t-faint { color: oklch(0.285 0.096 153 / 0.16); }
.t-soft { color: oklch(0.285 0.096 153 / 0.45); }
.t-dark-75 { color: oklch(0.285 0.096 153 / 0.75); }
.glow-lime { background-color: oklch(0.835 0.187 119 / 0.12); }
.overlay-dark { background-color: oklch(0.285 0.096 153 / 0.6); }

/* Titres : lignes équilibrées, jamais un mot seul en fin de titre. */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }