/*
 * KWARK — COUCHE CINÉMA (premium)
 * ---------------------------------------------------------------------------
 * Chargée APRÈS kwark-premium.css. Elle n'écrase aucun réglage de mise en page
 * existant : elle ajoute une ambiance, des transitions vidéo et des micro-
 * interactions. Tous les sélecteurs neufs utilisent le préfixe `kc-` ou un
 * attribut `data-kwark-*` pour éviter toute collision avec le bundle Next.js.
 *
 * Règle d'or : si le JS ne se charge pas, aucune règle ci-dessous ne s'active
 * (elles dépendent toutes d'un élément ou d'un attribut injecté par
 * kwark-cinema.js). Le site reste exactement tel qu'il était.
 */

:root {
  --kc-indigo: 99, 102, 241;
  --kc-violet: 139, 92, 246;
  --kc-cyan: 56, 189, 248;
  --kc-amber: 251, 146, 60;
  --kc-rose: 244, 63, 94;

  /* Niveau audio temps réel (0 → 1), piloté par kwark-cinema.js */
  --kc-level: 0;
  --kc-beat: 0;

  --kc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --kc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Rayons et espacements fluides — pilotés par la largeur ET la hauteur */
  --kc-radius-xl: clamp(1.25rem, 3.2vw, 2rem);
  --kc-radius-lg: clamp(0.9rem, 2.2vw, 1.35rem);
  --kc-radius-pill: 999px;
}

/* ========================================================================
   1. AMBIANCE — aurores lentes derrière toute la page
   ======================================================================== */

[data-kwark-aurora] {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

[data-kwark-aurora] .kc-aurora {
  position: absolute;
  border-radius: 50%;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(clamp(40px, 9vw, 110px));
  will-change: transform;
}

[data-kwark-aurora] .kc-a1 {
  top: -18%;
  left: -16%;
  width: min(132vw, 760px);
  height: min(132vw, 760px);
  background: radial-gradient(circle, rgba(var(--kc-indigo), 0.34) 0%, transparent 68%);
  animation: kc-drift-a 34s var(--kc-ease-in-out) infinite;
}

[data-kwark-aurora] .kc-a2 {
  right: -24%;
  bottom: -22%;
  width: min(148vw, 860px);
  height: min(148vw, 860px);
  background: radial-gradient(circle, rgba(var(--kc-violet), 0.28) 0%, transparent 66%);
  animation: kc-drift-b 44s var(--kc-ease-in-out) infinite;
}

[data-kwark-aurora] .kc-a3 {
  bottom: -8%;
  left: 24%;
  width: min(104vw, 560px);
  height: min(104vw, 560px);
  background: radial-gradient(circle, rgba(var(--kc-amber), 0.18) 0%, transparent 70%);
  opacity: 0.4;
  animation: kc-drift-c 52s var(--kc-ease-in-out) infinite;
}

/* Faisceau de lumière très doux, façon éclairage de plateau */
[data-kwark-aurora] .kc-beam {
  position: absolute;
  top: -30%;
  left: 50%;
  width: min(120vw, 900px);
  height: 90%;
  transform: translateX(-50%) rotate(8deg);
  background: linear-gradient(
    180deg,
    rgba(var(--kc-indigo), 0.12) 0%,
    rgba(var(--kc-violet), 0.05) 42%,
    transparent 78%
  );
  filter: blur(48px);
  opacity: 0.7;
  animation: kc-beam-breathe 16s ease-in-out infinite;
}

[data-kwark-aurora] .kc-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 46%, rgba(0, 0, 0, 0.5) 100%);
}

/* La scène respire au rythme de la voix / de la musique */
html[data-kwark-audio="on"] [data-kwark-aurora] .kc-a1,
html[data-kwark-audio="on"] [data-kwark-aurora] .kc-a2 {
  opacity: calc(0.5 + var(--kc-level) * 0.4);
  transition: opacity 120ms linear;
}

@keyframes kc-drift-a {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(9%, 7%, 0) scale(1.16); }
}

@keyframes kc-drift-b {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-11%, -8%, 0) scale(0.92); }
}

@keyframes kc-drift-c {
  0%,
  100% { transform: translate3d(-6%, 0, 0) scale(0.95); }
  50% { transform: translate3d(8%, -6%, 0) scale(1.12); }
}

@keyframes kc-beam-breathe {
  0%,
  100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

/* ========================================================================
   2. SCÈNE DU PERSONNAGE — halo réactif + fondu entre clips
   ======================================================================== */

/*
 * Halo « visualiseur » : ::after est libre (kwark-premium.css n'utilise que
 * ::before), donc aucune règle existante n'est écrasée.
 */
[data-layout] section[aria-live] [role="img"]::after {
  position: absolute;
  z-index: -1;
  inset: 8% 2% 2%;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(var(--kwark-aura-rgb), calc(0.1 + var(--kc-level) * 0.3)) 0%,
    rgba(var(--kwark-aura-rgb), calc(0.03 + var(--kc-level) * 0.12)) 44%,
    transparent 70%
  );
  transform: scale(calc(0.94 + var(--kc-level) * 0.16));
  opacity: calc(0.45 + var(--kc-level) * 0.55);
  transition:
    transform 90ms var(--kc-ease-out),
    opacity 140ms linear;
  will-change: transform, opacity;
}

/* Reflet au sol : ancre le canard, effet « plateau » */
[data-kwark-floor] {
  position: absolute;
  z-index: -1;
  bottom: 1%;
  left: 50%;
  width: 64%;
  height: 9%;
  transform: translateX(-50%) scaleX(calc(1 + var(--kc-level) * 0.12));
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(var(--kwark-aura-rgb), calc(0.26 + var(--kc-level) * 0.3)) 0%,
    transparent 72%
  );
  filter: blur(10px);
  opacity: 0.7;
  pointer-events: none;
  transition: transform 120ms var(--kc-ease-out);
}

/* Calque de fondu : dernière image du clip sortant, dessinée en canvas. */
[data-kwark-xfade] {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: opacity, transform;
}

[data-kwark-xfade][data-state="hold"] {
  opacity: 1;
  transition: none;
}

[data-kwark-xfade][data-state="out"] {
  opacity: 0;
  transition: opacity 420ms var(--kc-ease-out), transform 620ms var(--kc-ease-out);
  transform: scale(1.035);
}

/* Le clip entrant remplace l'ancien fondu brut par un vrai fondu + micro-zoom */
[data-layout] section[aria-live] [role="img"] video:not([data-kwark-dj-video]) {
  animation: kc-clip-in 520ms var(--kc-ease-out) both;
}

@keyframes kc-clip-in {
  from {
    opacity: 0;
    transform: translateZ(0) scale(1.045);
  }
  to {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

/* ---- Effets d'humeur (posés puis retirés par kwark-cinema.js) ---- */

[data-kwark-fx-stage] {
  position: absolute;
  z-index: 4;
  inset: -6%;
  border-radius: 2rem;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

[data-kwark-fx-stage][data-flash="true"] {
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.85) 0%, rgba(var(--kwark-aura-rgb), 0.35) 32%, transparent 66%);
  animation: kc-flash 460ms ease-out both;
}

@keyframes kc-flash {
  0% { opacity: 0; }
  12% { opacity: 0.9; }
  100% { opacity: 0; }
}

[role="img"][data-kc-fx="shake"] {
  animation: kc-shake 460ms var(--kc-ease-in-out) both;
}

[role="img"][data-kc-fx="pop"] {
  animation: kc-pop 620ms var(--kc-ease-out) both;
}

[role="img"][data-kc-fx="whip"] {
  animation: kc-whip 520ms var(--kc-ease-out) both;
}

[role="img"][data-kc-fx="glitch"] [data-kwark-xfade] {
  animation: kc-glitch 380ms steps(2, end) 2;
}

@keyframes kc-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  15% { transform: translate3d(-7px, 2px, 0) rotate(-1.4deg); }
  32% { transform: translate3d(6px, -3px, 0) rotate(1.2deg); }
  50% { transform: translate3d(-5px, 1px, 0) rotate(-0.9deg); }
  68% { transform: translate3d(4px, -2px, 0) rotate(0.7deg); }
  85% { transform: translate3d(-2px, 1px, 0) rotate(-0.3deg); }
}

@keyframes kc-pop {
  0% { transform: scale(0.94); }
  42% { transform: scale(1.05); }
  70% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes kc-whip {
  0% { transform: translate3d(14%, 0, 0) rotate(3deg); filter: blur(6px); opacity: 0.35; }
  55% { filter: blur(1.5px); }
  100% { transform: translate3d(0, 0, 0) rotate(0); filter: blur(0); opacity: 1; }
}

@keyframes kc-glitch {
  0% { transform: translate3d(0, 0, 0); filter: none; }
  20% { transform: translate3d(-2.2%, 0.6%, 0); filter: hue-rotate(-28deg) saturate(1.7); }
  40% { transform: translate3d(2.4%, -0.8%, 0); filter: hue-rotate(24deg) saturate(1.5); }
  60% { transform: translate3d(-1.4%, 0.3%, 0); filter: none; }
  100% { transform: translate3d(0, 0, 0); filter: none; }
}

/* Anneau lumineux qui pulse pendant que Kwark parle */
[data-kwark-ring] {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(78%, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -46%) scale(calc(0.86 + var(--kc-level) * 0.22));
  border: 1px solid rgba(var(--kwark-aura-rgb), calc(0.1 + var(--kc-level) * 0.35));
  border-radius: 50%;
  box-shadow:
    0 0 calc(18px + var(--kc-level) * 46px) rgba(var(--kwark-aura-rgb), calc(0.06 + var(--kc-level) * 0.22)),
    inset 0 0 calc(20px + var(--kc-level) * 40px) rgba(var(--kwark-aura-rgb), calc(0.04 + var(--kc-level) * 0.12));
  opacity: calc(0.2 + var(--kc-level) * 0.8);
  pointer-events: none;
  transition:
    transform 110ms var(--kc-ease-out),
    opacity 140ms linear;
  will-change: transform, opacity;
}

/* ========================================================================
   3. CHAT — bulles cinéma
   ======================================================================== */

[aria-label="Historique de conversation"] {
  scroll-behavior: smooth;
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 6px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 6px), transparent 100%);
}

/* Bulle Kwark : verre teinté par l'humeur détectée (--fx-rgb ← kwark-chat-fx.js) */
[aria-label="Historique de conversation"] .justify-start > div[class*="bg-indigo-500/15"] {
  position: relative;
  border-radius: 1.15rem 1.15rem 1.15rem 0.4rem;
  background:
    linear-gradient(
      148deg,
      rgba(var(--fx-rgb, 99, 102, 241), 0.2) 0%,
      rgba(12, 14, 28, 0.72) 62%,
      rgba(8, 9, 18, 0.8) 100%
    ) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(var(--fx-rgb, 99, 102, 241), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Liseré lumineux à gauche : marque la parole du canard */
[aria-label="Historique de conversation"] .justify-start > div[class*="bg-indigo-500/15"]::before {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(var(--fx-rgb, 99, 102, 241), 0.9),
    transparent
  );
  content: "";
  opacity: 0.85;
}

/* Bulle utilisateur : plus sobre, verre neutre */
[aria-label="Historique de conversation"] .justify-end > div {
  border-radius: 1.15rem 1.15rem 0.4rem 1.15rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) !important;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ========================================================================
   4. SUGGESTIONS RAPIDES
   ======================================================================== */

[data-kwark-chips] {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.1rem 0.15rem 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10px, #000 calc(100% - 16px), transparent 100%);
  animation: kc-fade-up 620ms var(--kc-ease-out) both;
}

[data-kwark-chips]::-webkit-scrollbar {
  display: none;
}

[data-kwark-chips] button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.34rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--kc-radius-pill);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  scroll-snap-align: start;
  cursor: pointer;
  transition:
    transform 180ms var(--kc-ease-out),
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

[data-kwark-chips] button span {
  font-size: 13px;
  line-height: 1;
}

[data-kwark-chips] button:hover,
[data-kwark-chips] button:focus-visible {
  border-color: rgba(var(--kc-indigo), 0.5);
  background: linear-gradient(150deg, rgba(var(--kc-indigo), 0.24), rgba(var(--kc-violet), 0.1));
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}

[data-kwark-chips] button:active {
  transform: translateY(0) scale(0.97);
}

@keyframes kc-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================================================
   5. INTRO CINÉMATIQUE
   ======================================================================== */

[data-kwark-intro] {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 1.9rem);
  padding:
    max(1.5rem, env(safe-area-inset-top))
    max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% 38%, rgba(var(--kc-indigo), 0.22) 0%, transparent 62%),
    #030303;
  opacity: 1;
  transition: opacity 620ms var(--kc-ease-out), visibility 620ms;
}

[data-kwark-intro][data-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-kwark-intro] .kc-intro-mark {
  position: relative;
  width: clamp(112px, 30vw, 180px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--kc-indigo), 0.4) 0%, transparent 68%);
  animation: kc-intro-breathe 3.2s ease-in-out infinite;
}

[data-kwark-intro] .kc-intro-mark img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-kwark-intro] .kc-intro-ring {
  position: absolute;
  inset: -14%;
  border: 1px solid rgba(var(--kc-indigo), 0.35);
  border-radius: 50%;
  animation: kc-intro-ring 2.6s var(--kc-ease-out) infinite;
}

[data-kwark-intro] .kc-intro-ring:nth-of-type(2) {
  animation-delay: 0.9s;
}

[data-kwark-intro] h2 {
  margin: 0;
  font-family: var(--font-sora), "Sora", ui-sans-serif, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  animation: kc-fade-up 900ms 180ms var(--kc-ease-out) both;
}

[data-kwark-intro] p {
  max-width: 22rem;
  font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
  margin: -0.4rem 0 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: clamp(0.76rem, 3.4vw, 0.9rem);
  line-height: 1.5;
  text-align: center;
  animation: kc-fade-up 900ms 320ms var(--kc-ease-out) both;
}

[data-kwark-intro] button {
  display: inline-flex;
  font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
  align-items: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.8rem 1.7rem;
  border: 1px solid rgba(var(--kc-indigo), 0.42);
  border-radius: var(--kc-radius-pill);
  background: linear-gradient(140deg, rgba(var(--kc-indigo), 0.34), rgba(var(--kc-violet), 0.18));
  box-shadow:
    0 18px 44px rgba(var(--kc-indigo), 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: clamp(0.85rem, 3.6vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  animation: kc-fade-up 900ms 460ms var(--kc-ease-out) both;
  transition: transform 200ms var(--kc-ease-out), box-shadow 200ms ease;
}

[data-kwark-intro] button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(var(--kc-indigo), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

[data-kwark-intro] button:active {
  transform: translateY(0) scale(0.98);
}

[data-kwark-intro] small {
  font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.22);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: kc-fade-up 900ms 600ms var(--kc-ease-out) both;
}

@keyframes kc-intro-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes kc-intro-ring {
  0% { opacity: 0.7; transform: scale(0.86); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Révélation de la scène quand l'intro se retire */
html[data-kwark-revealed="true"] [data-layout] section[aria-live],
html[data-kwark-revealed="true"] [data-layout] header {
  animation: kc-reveal 900ms var(--kc-ease-out) both;
}

html[data-kwark-revealed="true"] [data-layout] > div > div:last-child {
  animation: kc-reveal 900ms 140ms var(--kc-ease-out) both;
}

@keyframes kc-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ========================================================================
   6. DOCK POCKET (météo + commandes)
   ======================================================================== */

[data-kwark-dock] {
  position: fixed;
  z-index: 60;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: calc(max(0.85rem, env(safe-area-inset-bottom)) + 0.2rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

[data-kwark-dock] > * {
  pointer-events: auto;
}

[data-kwark-dock] .kc-dock-orb {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 44px;
  padding: 0 0.85rem 0 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--kc-radius-pill);
  background: linear-gradient(150deg, rgba(22, 23, 40, 0.92), rgba(8, 9, 17, 0.9));
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 220ms var(--kc-ease-out), border-color 220ms ease;
}

[data-kwark-dock] .kc-dock-orb:hover {
  border-color: rgba(var(--kc-indigo), 0.42);
  transform: translateY(-2px);
}

[data-kwark-dock] .kc-dock-orb em {
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

[data-kwark-dock] .kc-dock-orb i {
  color: rgba(255, 255, 255, 0.4);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-kwark-dock] .kc-dock-panel {
  width: min(19rem, calc(100vw - 1.7rem));
  padding: 0.95rem 1rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--kc-radius-lg);
  background: linear-gradient(155deg, rgba(24, 25, 43, 0.95), rgba(7, 8, 15, 0.95));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  transform-origin: bottom right;
  animation: kc-dock-in 320ms var(--kc-ease-out) both;
}

[data-kwark-dock][data-open="false"] .kc-dock-panel {
  display: none;
}

@keyframes kc-dock-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

[data-kwark-dock] .kc-dock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.7rem;
  color: rgba(255, 255, 255, 0.34);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

[data-kwark-dock] .kc-weather {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-kwark-dock] .kc-weather em {
  font-size: 30px;
  font-style: normal;
  line-height: 1;
}

[data-kwark-dock] .kc-weather b {
  display: block;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.15;
}

[data-kwark-dock] .kc-weather span {
  display: block;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}

[data-kwark-dock] .kc-quip {
  margin: 0.6rem 0 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
}

[data-kwark-dock] .kc-dock-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

[data-kwark-dock] .kc-dock-actions button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  min-height: 56px;
  padding: 0.5rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms var(--kc-ease-out);
}

[data-kwark-dock] .kc-dock-actions button em {
  font-size: 16px;
  font-style: normal;
  line-height: 1;
}

[data-kwark-dock] .kc-dock-actions button:hover {
  border-color: rgba(var(--kc-indigo), 0.4);
  background: rgba(var(--kc-indigo), 0.16);
  transform: translateY(-1px);
}

[data-kwark-dock] .kc-dock-actions button:active {
  transform: scale(0.97);
}

[data-kwark-dock] .kc-dock-foot {
  margin: 0.75rem 0 0;
  color: rgba(255, 255, 255, 0.2);
  font-size: 9.5px;
  line-height: 1.5;
}

/* Le dock s'efface quand un dialogue de consentement est ouvert */
html[data-kwark-dialog] [data-kwark-dock] {
  visibility: hidden;
  opacity: 0;
}

/* ========================================================================
   7. CHAMP DE SAISIE — finition premium
   ======================================================================== */

[data-layout] form {
  position: relative;
  overflow: visible;
}

[data-layout] form::after {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(var(--kc-indigo), 0.55), rgba(var(--kc-violet), 0.25), rgba(var(--kc-cyan), 0.35));
  content: "";
  opacity: 0;
  transition: opacity 320ms ease;
}

[data-layout] form:focus-within::after {
  opacity: 0.5;
  filter: blur(9px);
}

[data-layout] form button[type="submit"]:not(:disabled) {
  background: linear-gradient(140deg, rgb(var(--kc-indigo)), rgb(var(--kc-violet))) !important;
  box-shadow: 0 10px 26px rgba(var(--kc-indigo), 0.34) !important;
}

[data-layout] form button[type="submit"]:not(:disabled):hover {
  transform: translateY(-1px) scale(1.03);
}

/* Micro qui « respire » quand il écoute */
[data-layout] form button[aria-pressed="true"] {
  box-shadow:
    0 0 0 calc(2px + var(--kc-level) * 8px) rgba(var(--kc-rose), 0.16),
    0 8px 22px rgba(var(--kc-rose), 0.28) !important;
}

/* ========================================================================
   8. RESPONSIVE — tous écrans
   ======================================================================== */

/*
 * Mobile : le dock devient une pastille ronde. Il ne doit jamais masquer un
 * bouton du bandeau de consentement ni les liens légaux du pied de page.
 */
@media (max-width: 767px) {
  [data-kwark-dock] .kc-dock-orb {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 11px;
  }

  [data-kwark-dock] .kc-dock-orb i {
    display: none;
  }

  [data-kwark-dock] .kc-dock-orb em {
    font-size: 19px;
  }

  [data-kwark-dock] .kc-dock-orb [data-orb-temp]:empty {
    display: none;
  }

  [data-kwark-dock] .kc-dock-orb [data-orb-temp] {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 22px;
    padding: 0 3px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(8, 9, 17, 0.95);
    color: rgba(255, 255, 255, 0.78);
    font-size: 9.5px;
    line-height: 15px;
  }

  [data-kwark-dock] .kc-dock-orb {
    position: relative;
  }
}

/* Très petits téléphones : on économise chaque pixel vertical */
@media (max-width: 380px) {
  [data-kwark-chips] button {
    min-height: 32px;
    padding: 0.3rem 0.66rem;
    font-size: 11px;
  }

  [data-kwark-dock] .kc-dock-orb {
    width: 42px;
    height: 42px;
  }
}

/* Téléphone en paysage : la scène passe à côté du chat, pas au-dessus */
@media (max-height: 520px) and (orientation: landscape) {
  [data-kwark-intro] {
    gap: 0.6rem;
  }

  [data-kwark-intro] .kc-intro-mark {
    width: clamp(72px, 16vh, 108px);
  }

  [data-kwark-intro] h2 {
    font-size: 1.1rem;
  }

  [data-kwark-intro] p {
    display: none;
  }

  [data-kwark-chips] {
    margin-top: 0.35rem;
  }

  [data-kwark-dock] .kc-dock-panel {
    max-height: 74vh;
    overflow-y: auto;
  }
}

/* Écrans très hauts (téléphones 20:9, écrans pliés) : on aère */
@media (min-height: 900px) and (max-width: 767px) {
  [data-layout="mobile"] section[aria-live] {
    padding-block: 1rem;
  }
}

/* Grands écrans : le halo et le reflet ont plus d'ampleur */
@media (min-width: 1100px) {
  [data-kwark-floor] {
    height: 7%;
    filter: blur(14px);
  }

  [data-kwark-dock] {
    right: max(1.5rem, env(safe-area-inset-right));
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* Ultra-large : on évite que la grille s'étire à l'infini */
@media (min-width: 1700px) {
  [data-layout="desktop"] > div:not([aria-hidden="true"]):not([role="dialog"]) {
    width: min(100% - 4rem, 1420px) !important;
    max-width: 1420px !important;
  }
}

/* ========================================================================
   9. GARDE-FOUS — accessibilité et appareils modestes
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-kwark-aurora] .kc-aurora,
  [data-kwark-aurora] .kc-beam,
  [data-kwark-intro] .kc-intro-mark,
  [data-kwark-intro] .kc-intro-ring {
    animation: none !important;
  }

  [data-layout] section[aria-live] [role="img"] video:not([data-kwark-dj-video]) {
    animation: none !important;
  }

  [role="img"][data-kc-fx],
  [data-kwark-fx-stage] {
    animation: none !important;
  }

  html[data-kwark-revealed="true"] [data-layout] section[aria-live],
  html[data-kwark-revealed="true"] [data-layout] header,
  html[data-kwark-revealed="true"] [data-layout] > div > div:last-child {
    animation: none !important;
  }

  [data-kwark-xfade][data-state="out"] {
    transition: opacity 200ms linear;
    transform: none;
  }
}

/* Appareil modeste ou mode économie de données : on coupe le coûteux */
html[data-kwark-perf="low"] [data-kwark-aurora] .kc-aurora,
html[data-kwark-perf="low"] [data-kwark-aurora] .kc-beam {
  animation: none !important;
  filter: blur(60px);
}

html[data-kwark-perf="low"] [aria-label="Historique de conversation"] .justify-start > div[class*="bg-indigo-500/15"],
html[data-kwark-perf="low"] [aria-label="Historique de conversation"] .justify-end > div,
html[data-kwark-perf="low"] [data-kwark-dock] .kc-dock-panel,
html[data-kwark-perf="low"] [data-kwark-dock] .kc-dock-orb {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-kwark-perf="low"] [role="img"][data-kc-fx="glitch"] [data-kwark-xfade] {
  animation: none !important;
}

@media (prefers-contrast: more) {
  [aria-label="Historique de conversation"] .justify-start > div[class*="bg-indigo-500/15"] {
    background: rgba(10, 12, 24, 0.96) !important;
  }

  [data-kwark-chips] button {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
  }
}

/* ========================================================================
   10. TRÈS GRANDS ÉCRANS — le canard occupe enfin la place qu'il mérite
   ======================================================================== */

@media (min-width: 1500px) and (min-height: 800px) {
  /* La colonne de gauche est centrée verticalement : plus de vide en bas. */
  [data-layout="desktop"] section[aria-live] {
    align-self: center !important;
  }

  [data-layout="desktop"] section[aria-live] > div:first-child,
  [data-layout="desktop"] section[aria-live] [role="img"] > div {
    width: min(100%, 470px) !important;
    max-width: 470px !important;
  }

  [data-layout="desktop"] section[aria-live] [role="img"] > div > div {
    max-height: min(58vh, 560px) !important;
  }

  [data-layout="desktop"] section[aria-live] video,
  [data-layout="desktop"] section[aria-live] img {
    max-height: min(58vh, 560px) !important;
  }

  [data-layout="desktop"] section[aria-live] p {
    font-size: 0.85rem !important;
  }
}

/* ========================================================================
   11. PAYSAGE COURT — téléphone tourné, petite tablette en paysage
   ------------------------------------------------------------------------
   Sur ces écrans, l'ancienne mise en page empilait l'avatar au-dessus du
   chat : le cadre 3/4 gardait sa hauteur pleine et poussait la conversation
   hors de l'écran. On passe donc en deux colonnes — canard à gauche, chat à
   droite — et on borne le cadre de l'avatar, pas seulement la vidéo.
   ======================================================================== */

@media (min-width: 700px) and (max-height: 560px) and (orientation: landscape) {
  [data-layout="desktop"] {
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  [data-layout="desktop"] > div:not([aria-hidden="true"]):not([role="dialog"]) {
    display: grid !important;
    grid-template-columns: minmax(150px, 0.5fr) minmax(320px, 1.5fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
    row-gap: 0.2rem;
    width: min(100%, 1100px) !important;
    max-width: 1100px !important;
    min-height: 100dvh !important;
    margin-inline: auto;
    padding:
      max(0.5rem, env(safe-area-inset-top))
      max(0.75rem, env(safe-area-inset-right))
      max(0.5rem, env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left)) !important;
  }

  [data-layout="desktop"] header {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
  }

  [data-layout="desktop"] header > div {
    align-items: flex-start !important;
    padding: 0 !important;
  }

  [data-layout="desktop"] header p,
  [data-layout="desktop"] header > div > span {
    display: none !important;
  }

  [data-layout="desktop"] section[aria-live] {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-height: 0;
    padding: 0 !important;
  }

  [data-layout="desktop"] section[aria-live] > div:first-child,
  [data-layout="desktop"] section[aria-live] [role="img"] > div {
    width: min(28vw, 190px) !important;
    max-width: 190px !important;
  }

  [data-layout="desktop"] section[aria-live] [role="img"] > div > div,
  [data-layout="desktop"] section[aria-live] video,
  [data-layout="desktop"] section[aria-live] img {
    max-height: min(52vh, 200px) !important;
  }

  [data-layout="desktop"] > div:not([aria-hidden="true"]):not([role="dialog"]) > div:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 100%;
    max-height: calc(100dvh - 1rem);
    padding: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  [data-layout="desktop"] footer {
    display: none !important;
  }
}

/* Même correction pour les téléphones restés en mode « Tel » (< 768 px) */
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  [data-layout="mobile"] > div:not([aria-hidden="true"]):not([role="dialog"]) {
    display: grid !important;
    grid-template-columns: minmax(120px, 0.45fr) minmax(240px, 1.55fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    min-height: 100dvh !important;
    padding: 0.4rem max(0.6rem, env(safe-area-inset-right)) 0.4rem max(0.6rem, env(safe-area-inset-left)) !important;
  }

  [data-layout="mobile"] header {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
  }

  [data-layout="mobile"] header p,
  [data-layout="mobile"] header a {
    display: none !important;
  }

  [data-layout="mobile"] section[aria-live] {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding: 0 !important;
  }

  [data-layout="mobile"] section[aria-live] > div:first-child,
  [data-layout="mobile"] section[aria-live] [role="img"] > div,
  [data-layout="mobile"] section[aria-live] [role="img"] > div > div {
    width: min(32vw, 150px) !important;
    max-width: 150px !important;
    max-height: min(56vh, 170px) !important;
  }

  [data-layout="mobile"] section[aria-live] video,
  [data-layout="mobile"] section[aria-live] img {
    max-height: min(56vh, 170px) !important;
  }

  [data-layout="mobile"] > div:not([aria-hidden="true"]):not([role="dialog"]) > div:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-height: calc(100dvh - 0.8rem);
    padding: 0 !important;
    overflow-y: auto;
  }

  [data-layout="mobile"] footer {
    display: none !important;
  }
}

/*
 * Cadre de l'avatar borné aussi sur les écrans bas en portrait/laptop :
 * sans ça, le conteneur 3/4 garde sa hauteur pleine et repousse le chat.
 */
@media (min-width: 768px) and (max-height: 820px) {
  [data-layout="desktop"] section[aria-live] [role="img"] > div > div {
    max-height: min(38vh, 300px) !important;
  }
}

@media (min-width: 768px) and (max-height: 620px) {
  [data-layout="desktop"] section[aria-live] [role="img"] > div > div {
    max-height: min(30vh, 220px) !important;
  }
}