/* ==========================================================================
   OptiResto — passe de finition UI/UX (règles UI/UX Pro Max)
   - Jetons de mouvement : survols SaaS 200–250 ms, sorties plus rapides que les entrées
   - excessive-motion : 1–2 éléments animés par vue (la 3D reste l'élément clé du hero)
   - line-length : 65 caractères max pour les paragraphes d'introduction
   - focus-appearance : anneau de focus contrasté sur les boutons en dégradé
   - elevation-consistent : échelle d'ombres commune aux cartes
   - Couleur sémantique : ambre = la situation actuelle (enjeux), cyan/vert = la réponse OptiResto
   ========================================================================== */
:root {
  --dur-hover: 220ms;
  --dur-press: 120ms;
  --dur-exit: 160ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --elev-1: 0 1px 0 rgba(248, 250, 252, .04) inset, 0 20px 40px -28px rgba(0, 0, 0, .7);
  --elev-2: 0 1px 0 rgba(248, 250, 252, .06) inset, 0 28px 60px -26px rgba(0, 0, 0, .85), 0 0 0 1px rgba(56, 189, 248, .12);
  --measure-lead: 62ch;
  --measure-title: 22ch;
  --color-pain: var(--amber, #FBBF24);
  --color-solution: var(--cyan);
}

/* ---------- Interactions : réactives et cohérentes ---------- */
a, button, summary, [role="button"] { touch-action: manipulation; }

.btn {
  transition-property: transform, translate, box-shadow, background-color, border-color, color;
  transition-duration: var(--dur-hover);
  transition-timing-function: var(--ease-out);
}
.btn:active { transform: scale(.97); transition-duration: var(--dur-press); }
.btn--primary:focus-visible, .sticky-cta .btn:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}
.nav__links a, .footer__col a, .link-arrow, .link-arrow .icon, .faq__item summary { transition-duration: var(--dur-hover); }

.card {
  box-shadow: var(--elev-1);
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform 300ms var(--ease-out);
}
.card:hover { box-shadow: var(--elev-2); }

/* ---------- Mouvement : un seul élément vedette par vue ---------- */
/* Dans le hero, la 3D est l'élément clé : les étiquettes cessent de flotter quand elle est active. */
.has-3d .hero__visual .chip { animation: none !important; }
/* Signaux d'attention limités dans le temps plutôt qu'en boucle infinie. */
.eyebrow__dot { animation-iteration-count: 4; }
.hero__scroll span { animation-iteration-count: 4; }
.btn--primary.btn--lg { animation: none; }
.hero .btn--primary.btn--lg { animation: halo 3.2s ease-in-out 2.4s 3; }

/* ---------- Typographie : longueur de ligne et titres équilibrés ---------- */
.section__lead, .ambition__lead { max-width: var(--measure-lead); }
.section__head--center .section__lead, .ambition__lead { margin-inline: auto; }
.section__head .section__title { max-inline-size: var(--measure-title); }
.section__head--center .section__title { margin-inline: auto; }
.legal p, .legal li { max-width: 70ch; }

/* ---------- Couleur sémantique : ambre = enjeux, cyan = réponse ---------- */
.problem__item:hover .problem__icon, .story__panel:not(.story__panel--answer).is-active .story__icon {
  border-color: var(--color-pain);
}

@media (prefers-reduced-motion: reduce) {
  .card, .btn { transition-duration: .001ms; }
}

/* Les cartes déjà révélées gardent leur fondu d'entrée mais adoptent les durées de survol. */
.js .card[data-reveal].is-visible {
  transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out),
    transform 300ms var(--ease-out), opacity var(--dur) var(--ease);
}

/* ---------- Recommandations du générateur UI/UX Pro Max ---------- */
/* stagger-sequence : 30–60 ms entre éléments d'une même liste (au lieu de 90–110 ms). */
.js [data-reveal] { transition-delay: calc(var(--d, 0) * 60ms); }
.js [data-intro] { transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
/* cursor-pointer : tout élément cliquable l'annonce au survol. */
a[href], button:not(:disabled), summary, label[for], [role="button"] { cursor: pointer; }