/* Habillage « apple-design » (Emil Kowalski, d'après les WWDC Apple).
   Ne change ni la structure ni le contenu : police système, approche et interlignage par taille,
   ressorts amortis au lieu de durées fixes, retour visuel à l'appui, matières translucides,
   transparence et contraste réduits respectés. */

:root {
  /* ressorts calculés (amortissement, réponse) et convertis en courbes linear() */
  --spring: linear(0, 0.0164, 0.0579, 0.1151, 0.1813, 0.2515, 0.3223, 0.3913, 0.457, 0.5184, 0.5749, 0.6265, 0.673, 0.7147, 0.7519, 0.7848, 0.8138, 0.8392, 0.8615, 0.8809, 0.8977, 0.9123, 0.925, 0.9359, 0.9453, 0.9533, 0.9602, 0.9662, 0.9712, 0.9756, 0.9793, 0.9824, 0.9851, 0.9874, 0.9893, 0.991, 0.9924, 0.9936, 0.9946, 0.9954, 0.9961, 0.9967, 0.9973, 0.9977, 0.9981, 0.9984, 0.9986, 0.9988, 1);
  --spring-dur: 590ms;
  --spring-fast: linear(0, 0.0169, 0.0596, 0.1183, 0.186, 0.2575, 0.3294, 0.3993, 0.4656, 0.5273, 0.584, 0.6355, 0.6819, 0.7233, 0.7601, 0.7925, 0.821, 0.846, 0.8677, 0.8866, 0.9029, 0.9171, 0.9292, 0.9397, 0.9487, 0.9564, 0.963, 0.9686, 0.9734, 0.9775, 0.9809, 0.9839, 0.9864, 0.9885, 0.9903, 0.9918, 0.9931, 0.9942, 0.9951, 0.9959, 0.9966, 0.9971, 0.9976, 0.998, 0.9983, 0.9986, 0.9988, 0.999, 1);
  --spring-fast-dur: 450ms;
  --spring-sheet: linear(0, 0.0145, 0.0528, 0.1079, 0.174, 0.2465, 0.322, 0.3974, 0.4708, 0.5407, 0.6059, 0.6658, 0.72, 0.7686, 0.8115, 0.8489, 0.8812, 0.9088, 0.932, 0.9514, 0.9672, 0.9801, 0.9903, 0.9982, 1.0042, 1.0086, 1.0116, 1.0136, 1.0147, 1.0151, 1.015, 1.0145, 1.0138, 1.0128, 1.0117, 1.0106, 1.0094, 1.0083, 1.0072, 1.0062, 1.0053, 1.0045, 1.0037, 1.003, 1.0024, 1.0019, 1.0015, 1.0011, 1);
  --spring-sheet-dur: 410ms;
  --spring-bounce: linear(0, 0.0142, 0.0517, 0.1056, 0.1705, 0.242, 0.3164, 0.391, 0.4638, 0.5332, 0.5982, 0.6581, 0.7125, 0.7613, 0.8045, 0.8424, 0.8753, 0.9034, 0.9273, 0.9472, 0.9637, 0.977, 0.9878, 0.9962, 1.0026, 1.0074, 1.0108, 1.0131, 1.0144, 1.0151, 1.0151, 1.0148, 1.0141, 1.0132, 1.0122, 1.0111, 1.0099, 1.0088, 1.0077, 1.0067, 1.0057, 1.0049, 1.0041, 1.0034, 1.0027, 1.0022, 1.0017, 1.0013, 1);
  --spring-bounce-dur: 540ms;
  --ease: var(--spring);

  /* police système d'abord : optique, approche et lisibilité déjà réglées */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, "Geist", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, "Geist", sans-serif;
}

body { font-family: var(--font); font-optical-sizing: auto; letter-spacing: -0.003em; }

/* approche et interlignage propres à chaque taille : négatifs en grand, légèrement positifs en petit */
.heading-1, .heading-2, .heading-3, .heading-4, .intro-title, .case-hero h1, .stage-copy h3, .story-steps button, .big-kpi b, .stage-kpis b, .mail, .callout-text, .quote p { font-family: var(--display); }
.heading-1 { letter-spacing: -0.016em; line-height: 1.04; }
.heading-2 { letter-spacing: -0.013em; line-height: 1.06; }
.heading-3 { letter-spacing: -0.01em; line-height: 1.1; }
.heading-4 { letter-spacing: -0.008em; line-height: 1.14; }
.heading-5 { letter-spacing: -0.006em; line-height: 1.24; }
.heading-6, .title-1, .title-2 { letter-spacing: -0.008em; }
.lead { letter-spacing: -0.01em; line-height: 1.42; }
.body-3, .body-2 { letter-spacing: -0.006em; line-height: 1.5; }
.body-6, .caption-1, .caption-2, .title-4 { letter-spacing: 0; }
.caption-4, .project-tags li { letter-spacing: 0.01em; }
.stage-copy h3 { letter-spacing: -0.011em; line-height: 1.08; }
.callout-text { letter-spacing: -0.01em; line-height: 1.12; }
.big-kpi b, .stage-kpis b { letter-spacing: -0.014em; }

/* retour visuel à l'appui, jamais au relâchement */
.btn:active, .icon-btn:active, .dot:active, .flow-steps button:active, .proto-steps button:active, .msec button:active, .back:active, .link:active, .nav-links a:active, .menu a:active, .faq summary:active {
  transform: scale(0.97); transition: transform 100ms ease-out;
}
.next-project:active .wrap, .also-visual:active { transform: scale(0.99); transition: transform 100ms ease-out; }
.btn, .icon-btn, .dot, .flow-steps button, .proto-steps button { transition-timing-function: var(--spring-fast); transition-duration: var(--spring-fast-dur); }

/* matières : la barre de navigation flotte en verre, avec un bord supérieur qui accroche la lumière */
.nav { background: rgba(255, 255, 255, 0.64); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 30px -8px rgba(0, 0, 0, 0.14); }
.nav-links a { font-weight: 500; color: #1d1d1f; }
.nav-links a[aria-current] { background: rgba(0, 0, 0, 0.06); }
.proto-tools .btn { background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 4px 14px -6px rgba(0, 0, 0, 0.18); font-weight: 600; }


/* le menu mobile se matérialise : flou et échelle arrivent ensemble, depuis le bouton */
.menu { transform-origin: calc(100% - 40px) 40px; }
.menu:not([hidden]) { animation: materialize var(--spring-dur) var(--spring) both; }
@keyframes materialize { from { opacity: 0; transform: scale(0.96); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
.menu a { transition-timing-function: var(--spring); transition-duration: var(--spring-dur); }

/* transitions de la page en ressorts amortis */
.js .rv { transition: opacity var(--spring-dur) var(--spring), transform var(--spring-dur) var(--spring); }
.track { transition: transform var(--spring-dur) var(--spring); }
.stage-proto .proto-device { transition: transform var(--spring-dur) var(--spring); }
.callout-text { transition: opacity 300ms ease-out, transform var(--spring-dur) var(--spring), top var(--spring-dur) var(--spring); }

/* séparateurs : un fondu doux plutôt qu'un filet dur sous les éléments flottants */
.top-fade { position: fixed; top: 0; left: 0; right: 0; height: 90px; z-index: 45; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }

/* accessibilité : mouvement, transparence et contraste */
@media (prefers-reduced-transparency: reduce) {
  .nav, .menu, .proto-tools .btn, .glass, .proto .p-tabbar, .p-toast { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass.dark, .p-live { background: #1c1c1e !important; }
}
@media (prefers-contrast: more) {
  .nav, .proto-tools .btn, .stage, .p-card, .p-group { box-shadow: 0 0 0 1.5px #1d1d1f !important; }
  .muted, .caption-2, .kicker { color: #3a3a3c !important; }
}
@media (prefers-reduced-motion: reduce) {
  .menu:not([hidden]) { animation: none; }
  .btn:active, .icon-btn:active { transform: none; }
}

/* ---------- dans les prototypes ---------- */
.p-screen, .p-screen.on { transition-timing-function: var(--spring-fast); transition-duration: var(--spring-fast-dur); }
.p-screen { transition: transform var(--spring-fast-dur) var(--spring-fast), visibility 0s var(--spring-fast-dur); }
.p-screen.on { transition: transform var(--spring-fast-dur) var(--spring-fast); }
.p-screen.sheet, .p-screen.sheet.on, .p-screen.under { transition: transform var(--spring-sheet-dur) var(--spring-sheet), filter var(--spring-sheet-dur) var(--spring-sheet), visibility 0s; }
.p-toast { transition: transform var(--spring-bounce-dur) var(--spring-bounce), visibility 0s var(--spring-bounce-dur); }
.p-toast.show { transition: transform var(--spring-bounce-dur) var(--spring-bounce); }
.p-status .isl { transition: width var(--spring-bounce-dur) var(--spring-bounce), height var(--spring-bounce-dur) var(--spring-bounce), border-radius var(--spring-bounce-dur) var(--spring-bounce), top var(--spring-bounce-dur) var(--spring-bounce); }
.p-flight { transition: transform var(--spring-dur) var(--spring), clip-path var(--spring-dur) var(--spring); }
.proto .p-btn:active, .proto .p-card:active, .proto .p-choice:active, .proto .p-chip:active, .proto .p-row:active, .proto .d-slot:active, .proto .p-tabbar button:active { transform: scale(0.97); transition: transform 100ms ease-out; }
.proto { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Geist", sans-serif; letter-spacing: -0.006em; }
.proto .p-large, .proto .p-h1 { letter-spacing: -0.012em; }
.proto .p-small { letter-spacing: -0.004em; }
.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 0.5px rgba(255, 255, 255, 0.45), 0 12px 32px rgba(0, 0, 0, 0.16); }
.glass.dark .p-small, .glass.dark span { font-weight: 500; }


/* survol réservé aux pointeurs précis : pas d’état collé après un tap */
@media (hover: hover) and (pointer: fine) {
  .proto-tools .btn:hover { background: rgba(255, 255, 255, 0.85); }
}

/* ---------- mobile-native (Emil Kowalski) ---------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
button, a, [role="button"], summary, .proto [data-go], .proto [data-act], .proto [data-group] { touch-action: manipulation; }
button, [role="button"], summary, .btn, .icon-btn, .dot, .p-chip, .p-tabbar button, .proto-steps button, .flow-steps button, .msec button, .nav-links a, .nav-cta, .project-tags li, .d-slot {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.proto { -webkit-touch-callout: none; }
.proto img, .device img, .laptop img { -webkit-user-drag: none; user-select: none; }
.p-gal, .p-hscroll, .w-cards, .shots { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.p-body, .slide, .display-screen { overscroll-behavior: contain; }
.p-grabber, .p-screen.sheet .p-nav { touch-action: none; }
.nav { top: max(var(--s-200), env(safe-area-inset-top)); }
.menu { padding-top: calc(112px + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--s-400) + env(safe-area-inset-bottom, 0px)); }
footer .wrap { padding-bottom: calc(var(--s-400) + env(safe-area-inset-bottom, 0px)); }
.hero, .intro { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.callout-text { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform var(--spring-dur) var(--spring), translate var(--spring-dur) var(--spring); }