/* Lunalulu | réglages propres au site.
   Toute la charte vient du kit commun Devolim (/kit/devolim.css, copie de _modele/kit/ :
   ne pas modifier ici, voir _modele/KIT.md). Ce fichier ne contient que la couleur de l'app
   (le violet de Hibou, sur la palette de nuit de l'app) et les quelques blocs propres à ce site. */
:root {
  --app: #6A5AC4;     /* violet de Hibou (AppColors.owlEar) */
  --app-2: #2B2160;   /* la même famille, nettement plus foncée : la colline de nuit de l'app */
  --hero-hl: #FFD36E; /* miel, le bouton principal de l'app */
}

/* Accueil, bloc « Hibou » : sur-titre aligné à gauche à côté de l'illustration. */
.he-left { text-align: left; margin-bottom: 0; }
.he-owl { display: grid; place-items: center; padding: 12px 0; }
.he-owl img { width: min(100%, 360px); height: auto; filter: drop-shadow(0 26px 34px rgba(43, 33, 96, .35)); animation: k-bob 6s ease-in-out infinite; }
@media (max-width: 859px) { .he-left { text-align: center; } }

/* Hibou dans le bloc final. */
.k-cta-art .he-cta-owl { position: relative; z-index: 2; width: clamp(170px, 20vw, 260px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); animation: k-bob 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .he-owl img, .k-cta-art .he-cta-owl { animation: none; } }

/* Accueil, bloc « Langues » (04/11/2026) : une pastille en relief par langue, centrées. */
.he-langs { list-style: none; margin: var(--title-gap, 36px) auto 0; padding: 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 12px; }
.he-langs li { padding: 11px 18px; border-radius: 999px; font: 800 16px/1.2 var(--display); }
.he-langs small { font: 700 13px/1 var(--display); color: var(--app-ink, var(--app)); }
@media (max-width: 520px) { .he-langs { gap: 10px; } .he-langs li { padding: 9px 14px; font-size: 15px; } }

/* Haut de l'accueil (07/11/2026) : ciel de nuit qui scintille, logo Hibou et titre Lunalulu.
   Mêmes composants que les autres sites (k-hero, k-hero-grid, k-phone) ; seul le fond passe à la nuit.
   Tout s'arrête avec « réduire les animations ». */
.he-hero {
  background:
    radial-gradient(42% 38% at 84% 6%, color-mix(in oklab, var(--app) 60%, transparent), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, color-mix(in oklab, var(--app-2) 85%, #000), transparent 70%),
    linear-gradient(176deg, #181338 0%, var(--app-2) 46%, color-mix(in oklab, var(--app) 72%, var(--app-2)) 100%);
}
.he-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.he-sky i { position: absolute; left: var(--x); top: var(--y); width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%; background: #FFF8E1; box-shadow: 0 0 6px 1px rgba(255, 236, 170, .65); opacity: .35; animation: he-twinkle 3.8s ease-in-out var(--d, 0s) infinite; }
@keyframes he-twinkle { 0%, 100% { opacity: .22; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.he-moon { position: absolute; right: 6%; top: 13%; width: clamp(58px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; box-shadow: inset -16px 9px 0 0 #FFE29A; transform: rotate(-18deg); filter: drop-shadow(0 0 26px rgba(255, 211, 110, .5)); animation: he-glow 8s ease-in-out infinite; }
@keyframes he-glow { 50% { filter: drop-shadow(0 0 40px rgba(255, 211, 110, .75)); } }
.he-shoot { position: absolute; top: 16%; left: 62%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #FFF8E1, rgba(255, 248, 225, 0)); opacity: 0; transform: rotate(-24deg); animation: he-shoot 11s ease-in 2.5s infinite; }
.he-shoot-2 { top: 34%; left: 30%; width: 90px; animation-delay: 8s; animation-duration: 14s; }
@keyframes he-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 2% { opacity: 1; } 9% { opacity: 0; transform: translate(-280px, 125px) rotate(-24deg); } 100% { opacity: 0; transform: translate(-280px, 125px) rotate(-24deg); } }

.he-lockup { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.he-logo { flex: none; width: clamp(76px, 8vw, 104px); height: auto; border-radius: 26%; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), 0 18px 40px -12px rgba(0, 0, 0, .55), 0 0 64px rgba(255, 211, 110, .28); animation: k-bob 6s ease-in-out infinite; }
.k-hero h1.he-title { display: grid; gap: 12px; max-width: none; }
.he-name { display: inline-block; font-size: clamp(56px, 8.2vw, 108px); line-height: .92; letter-spacing: -0.04em; }
.he-name [aria-hidden] { display: inline-flex; }
.he-name [aria-hidden] span { display: inline-block; background: linear-gradient(180deg, #fff 35%, #FFE29A); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .22)); animation: he-letter .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms) both, he-float 6s ease-in-out calc(1.2s + var(--i) * 180ms) infinite; }
@keyframes he-letter { from { opacity: 0; transform: translateY(.5em) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes he-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.06em; } }
.he-tagline { font: 800 clamp(21px, 2.4vw, 30px)/1.15 var(--display); letter-spacing: -0.012em; color: rgba(255, 255, 255, .94); animation: he-fade 1s ease-out .55s both; }
.he-tagline em { font-style: normal; color: var(--hero-hl); }
@keyframes he-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.he-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 859px) {
  .he-lockup { flex-direction: column; text-align: center; }
  .he-moon { right: 8%; top: 9%; }
}
@media (prefers-reduced-motion: reduce) {
  .he-sky i, .he-moon, .he-logo, .he-name [aria-hidden] span, .he-tagline { animation: none; }
  .he-sky i { opacity: .7; }
  .he-shoot { display: none; }
}