/* Sébastien Keller · styles du site (export statique) */
html { scroll-behavior: smooth; }
  body { background: #F6F0E8; overflow-x: hidden; }
  ::selection { background: #5E4E9C; color: #FFFCF3; }
  a { color: #5E4E9C; }
  a:hover { color: #26214A; }
  @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  @keyframes smokeRise { 0% { opacity: 0; transform: translateY(14px) translateX(0) scaleY(0.8); } 22% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-46px) translateX(8px) scaleY(1.35); } }
  @keyframes smokeRise2 { 0% { opacity: 0; transform: translateY(12px) translateX(0) scaleY(0.9); } 30% { opacity: 0.4; } 100% { opacity: 0; transform: translateY(-52px) translateX(-7px) scaleY(1.3); } }
  @keyframes glimmer { 0%,100% { opacity: 0.12; } 50% { opacity: 0.5; } }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .rv { animation: fadeUp 0.85s cubic-bezier(0.16,0.68,0.32,1) both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  .marquee-track { animation: marquee 16s linear infinite; }
  .marquee-mask:hover .marquee-track { animation-play-state: paused; }
  .wordmark { transition: color 0.3s var(--ease), opacity 0.3s var(--ease); }
  .wordmark:hover { color: #26214A !important; opacity: 1 !important; }
  .flag:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(38,33,74,0.16); }
  .flag:hover .flag-img img { transform: scale(1.05); }
  .flag:hover .flag-go { transform: translate(3px,-3px); }
  /* anti-débordement horizontal sur mobile */
  .col2 > * { min-width: 0; }
  .hv5 { overflow-wrap: anywhere; }
  @media (max-width: 1080px) { .refs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .refs-grid > .refc:last-child { grid-column: 1 / -1; } }
  .refc:hover { border-color: #5E4E9C; background: #FFFFFF; }
  .nextp:hover .nextp-arrow { transform: translateX(4px); }
  @media (max-width: 600px) { .nextp-in { flex-direction: column; align-items: flex-start !important; gap: 14px !important; } }
  .mcard { transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease; will-change: transform; }
  a.mcard[href$="loopcraft/"]:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 22px 44px rgba(94,78,156,0.22); border-color: #B7A6E4; }
  a.mcard[href$="loopcraft/"]:hover .mcard-cta { gap: 13px; }
  .navlink:hover { opacity: 1 !important; }
  section[id] { scroll-margin-top: 84px; }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } html { scroll-behavior: auto; } }
  @media (max-width: 960px) { .nav-mid { display: none !important; } }
  @media (max-width: 900px) { .col2 { grid-template-columns: 1fr !important; } .hero-illu { order: -1; max-width: 440px; margin: 0 auto; } .cs-2 { grid-template-columns: 1fr !important; } #ia > div { grid-template-columns: 1fr !important; } }
  @media (max-width: 1080px) { #methode h2 { text-wrap: balance !important; white-space: normal !important; } .method-grid { grid-template-columns: repeat(3, 1fr) !important; } }
  @media (max-width: 620px) { .flags { grid-template-columns: 1fr !important; } .method-grid { grid-template-columns: 1fr 1fr !important; } .refs-grid { grid-template-columns: 1fr !important; } }

/* états de survol */
.hv1:hover { transform: translateY(-2px) !important; background: #5E4E9C !important; }
.hv2:hover { transform: translateY(-3px) !important; background: #5E4E9C !important; }
.hv3:hover { border-color: #5E4E9C !important; }
.hv4:hover { gap: 11px !important; color: #26214A !important; }
.hv5:hover { color: #E8C97A !important; }
.hv6:hover { background: rgba(255,252,243,0.1) !important; }
.hv7:hover { color: #5E4E9C !important; }
.hv8:hover { gap: 12px !important; color: #5E4E9C !important; }
.hv9:hover { background: #5E4E9C !important; color: #FFFFFF !important; }

.hv404a:hover { transform: translateY(-3px) !important; background: #5E4E9C !important; }
.hv404b:hover { border-color: #5E4E9C !important; }