*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root,
[data-theme="dark"] {
  --bg:        #03040d;
  --card:      rgba(255,255,255,0.055);
  --card-h:    rgba(255,255,255,0.09);
  --border:    rgba(255,255,255,0.09);
  --border-h:  rgba(167,139,250,0.38);
  --t1:        #f0f0ff;
  --t2:        #94a3b8;
  --t3:        #4b5570;
  --p1:        #7c3aed;
  --p2:        #2563eb;
  --p3:        #a78bfa;
  --grd:       linear-gradient(135deg,#7c3aed,#2563eb);
  --grd2:      linear-gradient(135deg,#a78bfa,#60a5fa);
  --red:       #ef4444;
  --green:     #10b981;
  --amber:     #f59e0b;
  --gold:      #f59e0b;
  --gold-l:    #fcd34d;
  --gold-d:    #d97706;
  --grd-gold:  linear-gradient(135deg,#fbbf24,#f59e0b);
  --r:         20px;
  --rs:        12px;
  --shadow:    rgba(0,0,0,.6);
  --card-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --card-shadow-h: 0 2px 4px rgba(0,0,0,.6), 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px rgba(167,139,250,.14);
  --inp-bg:    rgba(255,255,255,.05);
  --tgl-bg:    rgba(255,255,255,.025);
  --stat-bg:   rgba(255,255,255,.025);
}

[data-theme="light"] {
  --bg:        #f8f7ff;
  --card:      rgba(255,255,255,0.82);
  --card-h:    rgba(255,255,255,0.98);
  --border:    rgba(139,92,246,0.14);
  --border-h:  rgba(139,92,246,0.4);
  --t1:        #1e1b4b;
  --t2:        #4c4f6b;
  --t3:        #9094b0;
  --p1:        #7c3aed;
  --p2:        #2563eb;
  --p3:        #6d28d9;
  --grd:       linear-gradient(135deg,#7c3aed,#2563eb);
  --grd2:      linear-gradient(135deg,#a78bfa,#60a5fa);
  --red:       #dc2626;
  --green:     #059669;
  --amber:     #d97706;
  --r:         20px;
  --rs:        12px;
  --shadow:    rgba(139,92,246,.13);
  --card-shadow: 0 1px 3px rgba(139,92,246,.06), 0 8px 28px rgba(139,92,246,.08), inset 0 1px 0 rgba(255,255,255,.8);
  --card-shadow-h: 0 2px 8px rgba(139,92,246,.1), 0 20px 56px rgba(139,92,246,.14), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(139,92,246,.18);
  --inp-bg:    rgba(139,92,246,.05);
  --tgl-bg:    rgba(139,92,246,.04);
  --stat-bg:   rgba(139,92,246,.04);
}

[data-theme="light"] body {
  background: var(--bg);
}

/* Aurora mesh — light mode: Morning Warmth — amber top-left, sky top-right, pink bottom-right, mint bottom-left */
[data-theme="light"] .bg-mesh {
  background:
    radial-gradient(ellipse 70% 60% at   0%  -5%, rgba(251,191,36,.22)  0%, transparent 52%),
    radial-gradient(ellipse 60% 50% at 105%   0%, rgba(96,165,250,.22)  0%, transparent 50%),
    radial-gradient(ellipse 55% 50% at 105% 105%, rgba(249,168,212,.18) 0%, transparent 52%),
    radial-gradient(ellipse 50% 45% at   0% 105%, rgba(52,211,153,.13)  0%, transparent 48%),
    radial-gradient(ellipse 40% 35% at  50%  50%, rgba(167,139,250,.09) 0%, transparent 45%),
    linear-gradient(155deg, #fffef9 0%, #f5f0ff 48%, #f0fdf9 100%);
}

/* Light mode grid: tri-dot cluster (40px) — warm violet + indigo */
[data-theme="light"] .bg-grid {
  opacity: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='1.3' fill='%237c3aed' fill-opacity='.11'/%3E%3Ccircle cx='0'  cy='0'  r='.7' fill='%232563eb' fill-opacity='.08'/%3E%3Ccircle cx='40' cy='0'  r='.7' fill='%232563eb' fill-opacity='.08'/%3E%3Ccircle cx='0'  cy='40' r='.7' fill='%232563eb' fill-opacity='.08'/%3E%3Ccircle cx='40' cy='40' r='.7' fill='%232563eb' fill-opacity='.08'/%3E%3Ccircle cx='20' cy='0'  r='.5' fill='%23f59e0b' fill-opacity='.07'/%3E%3Ccircle cx='0'  cy='20' r='.5' fill='%2310b981' fill-opacity='.06'/%3E%3Ccircle cx='40' cy='20' r='.5' fill='%2310b981' fill-opacity='.06'/%3E%3Ccircle cx='20' cy='40' r='.5' fill='%23f59e0b' fill-opacity='.07'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}
[data-theme="light"] .inp-row { background: var(--inp-bg); }
[data-theme="light"] .tgl-row { background: var(--tgl-bg); }
[data-theme="light"] .stat   { background: var(--stat-bg); }
[data-theme="light"] .rc     { background: rgba(255,255,255,.8); }
[data-theme="light"] .rc.big { background: linear-gradient(135deg,rgba(124,58,237,.07),rgba(37,99,235,.05)); }
[data-theme="light"] .rc:hover { box-shadow: 0 16px 40px var(--shadow); }

/* ─── Filigrane floral (light) + constellation (dark) ── */
.bg-rose {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-size: 200px 200px;
  background-repeat: repeat;
}
[data-theme="light"] .bg-rose {
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='100' cy='100' r='8' stroke='%23e11d48' stroke-width='1.2' opacity='.18'/%3E%3Ccircle cx='100' cy='100' r='14' stroke='%23e11d48' stroke-width='.8' opacity='.1'/%3E%3Cellipse cx='100' cy='82' rx='5' ry='12' stroke='%23fb7185' stroke-width='1' opacity='.15' transform='rotate(0 100 100)'/%3E%3Cellipse cx='100' cy='82' rx='5' ry='12' stroke='%23fb7185' stroke-width='1' opacity='.15' transform='rotate(72 100 100)'/%3E%3Cellipse cx='100' cy='82' rx='5' ry='12' stroke='%23fb7185' stroke-width='1' opacity='.15' transform='rotate(144 100 100)'/%3E%3Cellipse cx='100' cy='82' rx='5' ry='12' stroke='%23fb7185' stroke-width='1' opacity='.15' transform='rotate(216 100 100)'/%3E%3Cellipse cx='100' cy='82' rx='5' ry='12' stroke='%23fb7185' stroke-width='1' opacity='.15' transform='rotate(288 100 100)'/%3E%3Cellipse cx='100' cy='69' rx='6' ry='18' stroke='%23fda4af' stroke-width='.9' opacity='.1' transform='rotate(36 100 100)'/%3E%3Cellipse cx='100' cy='69' rx='6' ry='18' stroke='%23fda4af' stroke-width='.9' opacity='.1' transform='rotate(108 100 100)'/%3E%3Cellipse cx='100' cy='69' rx='6' ry='18' stroke='%23fda4af' stroke-width='.9' opacity='.1' transform='rotate(180 100 100)'/%3E%3Cellipse cx='100' cy='69' rx='6' ry='18' stroke='%23fda4af' stroke-width='.9' opacity='.1' transform='rotate(252 100 100)'/%3E%3Cellipse cx='100' cy='69' rx='6' ry='18' stroke='%23fda4af' stroke-width='.9' opacity='.1' transform='rotate(324 100 100)'/%3E%3Cpath d='M100 118 Q88 132 80 148 Q96 140 100 118Z' stroke='%2316a34a' stroke-width='.9' opacity='.12'/%3E%3Cpath d='M100 118 Q112 132 120 148 Q104 140 100 118Z' stroke='%2316a34a' stroke-width='.9' opacity='.12'/%3E%3Cline x1='100' y1='118' x2='100' y2='160' stroke='%2316a34a' stroke-width='1' opacity='.1'/%3E%3Ccircle cx='0' cy='0' r='5' stroke='%23e11d48' stroke-width='.8' opacity='.08'/%3E%3Ccircle cx='200' cy='0' r='5' stroke='%23e11d48' stroke-width='.8' opacity='.08'/%3E%3Ccircle cx='0' cy='200' r='5' stroke='%23e11d48' stroke-width='.8' opacity='.08'/%3E%3Ccircle cx='200' cy='200' r='5' stroke='%23e11d48' stroke-width='.8' opacity='.08'/%3E%3Cpath d='M0 12 Q6 6 12 0' stroke='%23e11d48' stroke-width='.7' opacity='.07'/%3E%3Cpath d='M188 0 Q194 6 200 12' stroke='%23e11d48' stroke-width='.7' opacity='.07'/%3E%3Cpath d='M0 188 Q6 194 12 200' stroke='%23e11d48' stroke-width='.7' opacity='.07'/%3E%3Cpath d='M188 200 Q194 194 200 188' stroke='%23e11d48' stroke-width='.7' opacity='.07'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] .bg-rose {
  opacity: 1;
  /* Starfield lattice: 3 scales of dots + crossing diagonal lines */
  background-image:
    radial-gradient(circle 2px   at 0    0,    rgba(192,170,255,.38) 100%, transparent 100%),
    radial-gradient(circle 1.1px at 0    0,    rgba(139, 92,246,.22) 100%, transparent 100%),
    radial-gradient(circle .6px  at 50% 50%,   rgba(199,210,254,.16) 100%, transparent 100%),
    repeating-linear-gradient( 45deg, rgba(139, 92,246,.038) 0, rgba(139, 92,246,.038) 1px, transparent 1px, transparent 30px),
    repeating-linear-gradient(135deg, rgba( 99,102,241,.038) 0, rgba( 99,102,241,.038) 1px, transparent 1px, transparent 30px);
  background-size: 90px 90px, 45px 45px, 45px 45px, 60px 60px, 60px 60px;
  background-position: 0 0, 22px 22px, 0 0, 0 0, 0 0;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ─── Theme toggle button ────────────────────────────────── */
.top-controls {
  position: fixed; top: 1.1rem; right: 1.25rem; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.top-btns {
  display: flex; gap: .5rem; align-items: center;
}
/* ─── Motivational speaker ─────────────────────────── */
.motiv-speaker {
  display: inline-flex; align-items: center; gap: .6rem;
  pointer-events: none;
  margin-top: 1.5rem;
  justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 100px;
  padding: .38rem .85rem .38rem .38rem;
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 16px rgba(124,58,237,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
.motiv-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#ede9fe,#ddd6fe);
  border: 1.5px solid rgba(167,139,250,.5);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  animation: avatarPulse 3s ease-in-out infinite;
}
.motiv-avatar img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
@keyframes avatarPulse {
  0%,100% { box-shadow: 0 0 12px rgba(167,139,250,.2); }
  50%      { box-shadow: 0 0 22px rgba(167,139,250,.45); }
}
.motiv-bubble {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 220px;
  text-align: left;
}
/* tail pointing right toward the avatar */
.motiv-bubble::after { display: none; }
.motiv-bubble::before { display: none; }
.motiv-text {
  font-family: "Space Grotesk", sans-serif;
  font-size: .72rem; font-weight: 500; font-style: italic;
  color: var(--t2);
  line-height: 1.35;
  white-space: pre-line;
  display: block;
  transition: opacity .45s ease, transform .45s ease;
}
.motiv-text.motiv-out {
  opacity: 0; transform: translateX(8px);
}
.motiv-text.motiv-in {
  opacity: 1; transform: translateX(0);
}
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card);
  color: var(--t2); cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .25s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  padding: 0; position: relative;
}
.theme-btn:hover {
  background: var(--card-h); border-color: var(--border-h);
  color: var(--t1); transform: scale(1.08);
  box-shadow: 0 4px 20px var(--shadow);
}
.theme-btn:active { transform: scale(.93); }
.theme-btn svg {
  width: 17px; height: 17px; flex-shrink: 0;
  position: absolute;
  transition: opacity .2s ease, transform .3s ease;
}
/* Dark mode: show moon, hide sun */
[data-theme="dark"]  .icon-moon { opacity: 1; transform: rotate(0); }
[data-theme="dark"]  .icon-sun  { opacity: 0; transform: rotate(90deg) scale(.6); }
/* Light mode: show sun, hide moon */
[data-theme="light"] .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="light"] .icon-sun  { opacity: 1; transform: rotate(0); }

body {
  font-family: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  overflow-x: hidden;
  /* Réserve l'espace de la scrollbar dès le départ → évite le reflow du calendrier
     quand le panneau résultats grandit et qu'une scrollbar apparaît */
  scrollbar-gutter: stable;
}
/* Grain texture for depth */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ─── Background ──────────────────────────────────────────── */
.bg-mesh {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at  -8%  -8%, rgba(6,182,212,.26)   0%, transparent 52%),
    radial-gradient(ellipse 60% 55% at 108%   0%, rgba(99,102,241,.22)  0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 108% 112%, rgba(236,72,153,.16)  0%, transparent 52%),
    radial-gradient(ellipse 55% 48% at  -8% 108%, rgba(124,58,237,.17)  0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at  50%  50%, rgba(59,130,246,.09)  0%, transparent 45%);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 1;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ─── Layout ──────────────────────────────────────────────── */
.wrap {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto; padding: 3rem 1.5rem 4.5rem;
}

header {
  text-align: center; margin-bottom: 3.25rem;
  animation: fadeDown .6s ease both;
  position: relative;
}
/* Radial glow orb behind the title */
header::before {
  content: '';
  position: absolute; top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 520px; height: 220px;
  background: radial-gradient(ellipse, rgba(124,58,237,.18) 0%, rgba(37,99,235,.1) 45%, transparent 75%);
  pointer-events: none; z-index: -1;
  filter: blur(32px);
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(124,58,237,.1);
  border: 1px solid rgba(124,58,237,.28);
  border-radius: 100px; padding: .38rem 1.1rem;
  font-size: .67rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--p3); margin-bottom: 1rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 4px rgba(124,58,237,.07), 0 2px 12px rgba(124,58,237,.18);
}
[data-theme="light"] .badge {
  background: rgba(124,58,237,.07);
  border-color: rgba(124,58,237,.22);
  color: var(--p1);
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grd); animation: pulse 2.4s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(124,58,237,.6);
}

@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.6} }

h1 {
  font-size: clamp(2rem,5.5vw,3.6rem); font-weight: 800; line-height: 1.05;
  font-family: 'Bricolage Grotesque', sans-serif;
  margin-bottom: .55rem;
  animation: fadeDown .7s cubic-bezier(.22,1,.36,1) both;
}

/* “Facturation by” */
.h1-by {
  display: block;
  font-size: clamp(.7rem,1.4vw,.88rem); font-weight: 600;
  letter-spacing: .35em; text-transform: uppercase;
  color: var(--t3); margin-bottom: .2rem;
  opacity: 0;
  animation: byReveal 1s cubic-bezier(.16,1,.3,1) .1s forwards;
}
@keyframes byReveal {
  0%   { opacity:0; transform:translateY(8px); filter:blur(3px); }
  100% { opacity:.75; transform:translateY(0); filter:blur(0); }
}

/* “Emma” wrapper — position anchor for sparks */
.h1-name {
  display: inline-block;
  position: relative;
  line-height: 1;
}
/* Sweep shimmer underline */
.h1-name::after {
  content: '';
  position: absolute;
  bottom: -8px; left: -8px; right: -8px; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244,114,182,.9) 15%,
    rgba(168,85,247,.95) 38%,
    rgba(99,102,241,.9)  52%,
    rgba(56,189,248,.85) 72%,
    rgba(168,85,247,.7)  86%,
    transparent 100%);
  filter: blur(.4px);
  background-size: 300% 100%;
  background-position: 150% 0;
  border-radius: 2px;
  pointer-events: none;
  animation: underlineSweep 3.8s cubic-bezier(.4,0,.2,1) 1s infinite;
}
@keyframes underlineSweep {
  0%   { background-position:  150% 0; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: .6; }
  100% { background-position: -150% 0; opacity: 0; }
}

/* Per-letter */
.h1-letter {
  display: inline-block;
  font-size: clamp(3.2rem, 9vw, 6.5rem); font-weight: 800;
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.03em;
  background: linear-gradient(145deg,
    hsl(calc(var(--hue) + 50), 100%, 92%) 0%,
    hsl(var(--hue), 98%, 74%)             28%,
    hsl(calc(var(--hue) - 20), 100%, 82%) 55%,
    hsl(calc(var(--hue) + 25), 95%, 90%) 80%,
    hsl(calc(var(--hue) + 50), 100%, 92%) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    letterIn      .85s cubic-bezier(.16,1,.3,1) both,
    letterFloat   5.5s ease-in-out             infinite,
    letterShimmer 3.5s ease-in-out             infinite;
  animation-delay:
    calc(var(--i) * .06s + .12s),
    calc(var(--i) * .35s + .7s),
    calc(var(--i) * .5s  + 1s);
  will-change: transform, filter;
  cursor: default;
}
.h1-letter:hover {
  filter:
    drop-shadow(0 0 12px hsla(var(--hue), 100%, 85%, .9))
    drop-shadow(0 0 32px hsla(var(--hue), 100%, 75%, .6))
    drop-shadow(0 0 60px hsla(calc(var(--hue) + 40), 100%, 80%, .3));
  animation-play-state: paused, paused, paused;
}

@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(36px) scale(.8) rotateX(25deg); filter: blur(12px); }
  50%  { opacity: 1; filter: blur(0); }
  72%  { transform: translateY(-8px) scale(1.06) rotateX(0); }
  88%  { transform: translateY(2px) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes letterFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  38%      { transform: translateY(-8px) rotate(.3deg); }
  68%      { transform: translateY(3.5px) rotate(-.2deg); }
}
@keyframes letterShimmer {
  0%, 100% { background-position: 0% 30%; }
  50%      { background-position: 100% 70%; }
}

/* Sparks — orbiting particles */
.h1-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.spark {
  position: absolute;
  width: var(--sz,3px); height: var(--sz,3px);
  border-radius: 50%;
  top: 50%; left: 50%;
  animation: sparkOrbit var(--dur, 8s) ease-in-out infinite;
  animation-delay: var(--del, 0s);
  opacity: 0;
}
.spark::after {
  content: '';
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--col, #e879f9);
  box-shadow: 0 0 5px 3px var(--col, #e879f9);
}
/* No comet tail — cleaner */
.spark::before { display: none; }
.spark.s1 { --dur:8s;   --del:0s;    --r:52px; --col:#e879f9; --sz:3px; }
.spark.s2 { --dur:11s;  --del:-3.2s; --r:42px; --col:#38bdf8; --sz:3px; }
.spark.s3 { --dur:7s;   --del:-1.5s; --r:60px; --col:#a855f7; --sz:4px; }
.spark.s4 { --dur:9s;   --del:-5s;   --r:36px; --col:#f472b6; --sz:2px; }
.spark.s5 { --dur:6.5s; --del:-2.5s; --r:54px; --col:#818cf8; --sz:3px; }
.spark.s6 { --dur:10s;  --del:-.8s;  --r:46px; --col:#34d399; --sz:3px; }
.spark.s7 { --dur:12s;  --del:-5.5s; --r:50px; --col:#fb923c; --sz:2px; }
.spark.s8 { --dur:8.5s; --del:-3.8s; --r:38px; --col:#f0abfc; --sz:3px; }
.spark.s7, .spark.s8 { animation-name: sparkOrbitCCW; }

@keyframes sparkOrbit {
  0%   { transform: rotate(0turn)  translateX(var(--r)) rotate(0turn);  opacity:0; }
  20%  { opacity: .55; }
  78%  { opacity: .35; }
  100% { transform: rotate(1turn)  translateX(var(--r)) rotate(-1turn); opacity:0; }
}
@keyframes sparkOrbitCCW {
  0%   { transform: rotate(0turn)  translateX(var(--r)) rotate(0turn);  opacity:0; }
  20%  { opacity: .45; }
  78%  { opacity: .25; }
  100% { transform: rotate(-1turn) translateX(var(--r)) rotate(1turn);  opacity:0; }
}
.sub {
  font-size: .88rem; color: var(--t2); font-weight: 400; opacity: .65;
  letter-spacing: .01em;
}

/* ─── Live clock (fixed top-left) ────────────────────────── */
.live-clock {
  position: fixed; top: .6rem; left: 1.25rem; z-index: 100;
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
}
.clock-greeting {
  font-size: .64rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--t2); opacity: .5;
  padding-left: .25rem;
}
.clock-face {
  display: inline-flex; align-items: center; gap: .7rem;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.18);
  border-radius: 18px; padding: .55rem 1.1rem;
  backdrop-filter: blur(14px); position: relative;
}
[data-theme="light"] .clock-face {
  background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.22);
}
.clock-block {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.clock-num {
  font-family: 'Space Grotesk', monospace; font-size: 1.9rem; font-weight: 800;
  letter-spacing: .03em;
  background: linear-gradient(155deg, #c4b5fd 15%, #818cf8 85%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="light"] .clock-num {
  background: linear-gradient(155deg, #7c3aed 10%, #2563eb 90%);
  -webkit-background-clip: text; background-clip: text;
}
.clock-unit-lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  color: var(--t2); opacity: .6; margin-top: .18rem;
}
.clock-sep {
  font-size: 1.55rem; font-weight: 700; color: #a78bfa; line-height: 1;
  animation: sepPulse 1.2s ease-in-out infinite;
  -webkit-text-fill-color: #a78bfa;
}
.clock-sep-sm { font-size: 1.3rem; opacity: .45; }
@keyframes sepPulse {
  0%, 100% { opacity: .5; }
  50%       { opacity: .12; }
}
.clock-block-sm .clock-num {
  font-size: 1.45rem; font-weight: 700;
  background: linear-gradient(155deg, #a78bfa, #818cf8);
  -webkit-background-clip: text; background-clip: text;
  opacity: .75;
}
[data-theme="light"] .clock-block-sm .clock-num {
  background: linear-gradient(155deg, #7c3aed, #4f46e5);
  -webkit-background-clip: text; background-clip: text;
}
.sec-tick { animation: secTick .18s ease-out; }
@keyframes secTick {
  from { transform: translateY(-5px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.clock-face.clock-boom {
  animation: clockBoom 7s ease-in-out forwards;
}
@keyframes clockBoom {
  0%   { box-shadow: none; }
  8%   { box-shadow: 0 0 0 3px #a78bfa, 0 0 20px 6px rgba(167,139,250,.55); }
  18%  { box-shadow: 0 0 0 3px #f472b6, 0 0 20px 6px rgba(244,114,182,.45); }
  30%  { box-shadow: 0 0 0 3px #fbbf24, 0 0 18px 5px rgba(251,191,36,.4); }
  45%  { box-shadow: 0 0 0 3px #34d399, 0 0 18px 5px rgba(52,211,153,.35); }
  60%  { box-shadow: 0 0 0 2px #818cf8, 0 0 14px 4px rgba(129,140,248,.3); }
  80%  { box-shadow: 0 0 0 1px rgba(167,139,250,.25); }
  100% { box-shadow: none; }
}
.clock-num.num-boom {
  animation: numBoom 7s ease-in-out forwards;
  display: inline-block;
}
@keyframes numBoom {
  0%   { filter: none; }
  8%   { filter: drop-shadow(0 0 10px #a78bfa); }
  20%  { filter: drop-shadow(0 0 10px #f472b6); }
  35%  { filter: drop-shadow(0 0 10px #fbbf24); }
  50%  { filter: drop-shadow(0 0 8px #34d399); }
  65%  { filter: drop-shadow(0 0 8px #818cf8); }
  85%  { filter: drop-shadow(0 0 4px #a78bfa); }
  100% { filter: none; }
}
/* boom overlay — anchored below the clock pill */
.boom-overlay {
  position: fixed; top: 0; left: 0;
  z-index: 9999; pointer-events: none; overflow: visible;
}
.boom-bg { display: none; }
/* card wrapper */
.boom-card {
  position: absolute; top: 6.4rem; left: 1.1rem;
  min-width: 180px;
  background: rgba(12, 9, 26, .82);
  border: 1px solid rgba(167,139,250,.42);
  border-radius: 18px;
  padding: 1.4rem 2rem;
  text-align: left;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow:
    0 0 0 1px rgba(167,139,250,.12),
    0 16px 48px rgba(0,0,0,.5),
    0 0 60px rgba(167,139,250,.2);
  animation: cardIn 7s cubic-bezier(.2,.8,.2,1) forwards;
  overflow: visible;
}
@keyframes cardIn {
  0%   { opacity: 0; transform: translateX(-18px) scale(.9); }
  10%  { opacity: 1; transform: translateX(3px) scale(1.02); }
  17%  { transform: translateX(0) scale(1); }
  72%  { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-12px) scale(.94); }
}
.boom-shockwave {
  position: absolute; top: 50%; left: 50%;
  width: 70px; height: 70px; border-radius: 50%;
  margin-left: -35px; margin-top: -35px;
  border: 1.5px solid var(--sc, #a78bfa);
  animation: shockwave var(--sdur, 1.4s) cubic-bezier(.2,.8,.4,1) var(--sdelay, 0s) forwards;
}
@keyframes shockwave {
  0%   { transform: scale(0); opacity: .85; }
  100% { transform: scale(var(--smax, 5)); opacity: 0; }
}
.boom-hour-text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.8rem, 5vw, 3.8rem); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #ede9fe 0%, #a78bfa 35%, #f472b6 65%, #fbbf24 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 2s linear infinite;
  text-shadow: none;
}
.boom-sub-text {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(200, 185, 255, .72);
  margin-top: .65rem;
  animation: subTextIn 7s ease-in-out forwards;
}
@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes subTextIn {
  0%,14% { opacity: 0; transform: translateY(8px); }
  22%    { opacity: 1; transform: translateY(0); }
  72%    { opacity: 1; }
  100%   { opacity: 0; }
}
.clock-sparks { position: absolute; inset: 0; pointer-events: none; }
.clock-spark-dot {
  position: absolute; top: 50%; left: 50%;
  border-radius: var(--br, 50%);
  background: var(--c, #a78bfa);
  width: var(--sz, 5px); height: var(--sz, 5px);
  animation: sparkFly var(--dur, 2s) cubic-bezier(.15,.7,.35,1) var(--delay, 0s) forwards;
}
@keyframes sparkFly {
  0%   { transform: translate(-50%,-50%) rotate(var(--a)) translateX(4px) scale(1.6); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) rotate(calc(var(--a) + var(--spin))) translateX(var(--d)) scale(0); opacity: 0; }
}

.grid {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 1.75rem;
  align-items: start;
}

/* ─── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.6rem;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--card-shadow);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  position: relative;
}
/* Subtle top accent line on all cards — always slightly visible */
.card::after {
  content: ''; pointer-events: none;
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(124,58,237,.3) 35%, rgba(37,99,235,.22) 65%, transparent 95%);
  border-radius: var(--r) var(--r) 0 0;
  opacity: .45; transition: opacity .3s ease;
}
.card:hover { border-color: var(--border-h); box-shadow: var(--card-shadow-h); transform: translateY(-2px); }
.card:hover::after { opacity: 1; }

/* Left params card — subtle violet tint */
.card:first-child {
  background: linear-gradient(160deg, rgba(124,58,237,.045) 0%, var(--card) 55%);
}
[data-theme="light"] .card:first-child {
  background: linear-gradient(160deg, rgba(124,58,237,.03) 0%, rgba(255,255,255,.82) 55%);
}

.card-title {
  font-size: .62rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t3);
  display: flex; align-items: center; gap: .55rem; margin-bottom: 1.4rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid transparent;
  background-image: linear-gradient(90deg, var(--border) 0%, rgba(124,58,237,.2) 50%, var(--border) 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: bottom;
}
.card-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--grd); flex-shrink: 0;
  box-shadow: 0 0 10px rgba(124,58,237,.65);
}

/* ─── Form ────────────────────────────────────────────────── */
.fg { margin-bottom: 1rem; }
.fl {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--t2); margin-bottom: .4rem;
  letter-spacing: .03em;
}

.inp-row {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--rs); overflow: hidden;
  transition: all .22s ease;
}
.inp-row:focus-within {
  border-color: rgba(124,58,237,.7);
  background: rgba(124,58,237,.07);
  box-shadow: 0 0 0 3px rgba(124,58,237,.14), 0 0 0 1px rgba(124,58,237,.5);
}
.inp-icon {
  padding: 0 .75rem; color: var(--t3); font-size: .9rem;
  flex-shrink: 0; pointer-events: none;
  display: flex; align-items: center;
}
.inp-row input {
  flex: 1; padding: .75rem .5rem;
  background: transparent; border: none; outline: none;
  color: var(--t1); font-family: inherit; font-size: .92rem; font-weight: 600;
  min-width: 0;
  -moz-appearance: textfield;
}
.inp-row input::-webkit-inner-spin-button,
.inp-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.inp-unit {
  padding: 0 .85rem; color: var(--t3); font-size: .8rem; font-weight: 500;
  border-left: 1px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center;
}

/* ─── Time picker (tâches annexes) ─────────────────────────── */
.time-range {
  display: flex; align-items: center; gap: .5rem;
}
.time-range-arrow {
  color: var(--t3); font-size: 1rem; flex-shrink: 0; user-select: none;
}
.time-picker {
  flex: 1;
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  border-radius: var(--rs); overflow: hidden;
  transition: all .2s ease;
}
.time-picker:focus-within {
  border-color: rgba(124,58,237,.7);
  background: rgba(124,58,237,.07);
  box-shadow: 0 0 0 3px rgba(124,58,237,.14), 0 0 0 1px rgba(124,58,237,.5);
}
[data-theme="light"] .time-picker { background: var(--inp-bg); }
.time-sel {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: none; outline: none;
  color: var(--t1); font-family: inherit; font-size: .92rem; font-weight: 600;
  padding: .72rem .4rem .72rem .55rem;
  cursor: pointer; text-align: center;
}
.time-sel option { background: var(--card); color: var(--t1); }
.time-sep {
  color: var(--t3); font-size: .8rem; font-weight: 600;
  padding: 0 .15rem; flex-shrink: 0; user-select: none;
}
.time-result {
  margin-top: .5rem;
  font-size: .75rem; color: var(--t3); font-weight: 500;
  display: flex; align-items: center; gap: .3rem;
}
.time-result::before {
  content: '⏱'; font-size: .65rem; opacity: .6;
}
.time-result strong { color: var(--p3); font-weight: 700; }

/* Stepper (+/-) */
.steppers {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border); flex-shrink: 0;
}
.step-btn {
  flex: 1; width: 34px; background: transparent; border: none;
  color: var(--t3); cursor: pointer; font-size: .75rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.step-btn:hover  { background: rgba(124,58,237,.18); color: var(--p3); }
.step-btn:active { background: rgba(124,58,237,.3);  color: var(--t1); }
.step-btn:first-child { border-bottom: 1px solid var(--border); }

/* ─── Toggle ──────────────────────────────────────────────── */
.tgl-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); border-radius: var(--rs);
  margin-bottom: .9rem; cursor: pointer; transition: all .22s ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; gap: .75rem;
}
.tgl-row:hover { background: rgba(255,255,255,.06); border-color: var(--border-h); }
.tgl-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tgl-label { font-size: .88rem; font-weight: 600; color: var(--t1); letter-spacing: -.01em; }
.tgl-desc  { font-size: .72rem; color: var(--t3); font-weight: 400; }
/* Pills block — affiché juste sous le toggle, pas dedans */
.task-pills-block {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: -.5rem; margin-bottom: .85rem;
  padding: .55rem .75rem;
  background: rgba(124,58,237,.05);
  border: 1px solid rgba(124,58,237,.12);
  border-top: none;
  border-radius: 0 0 var(--rs) var(--rs);
}
[data-theme="light"] .task-pills-block {
  background: rgba(124,58,237,.04);
  border-color: rgba(124,58,237,.13);
}
.task-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .6rem;
  border-radius: 100px;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
}
/* OFF — ghosted */
.task-pill.off {
  background: transparent;
  border: 1px solid rgba(124,58,237,.15);
  color: var(--t3);
  opacity: .55;
}
.task-pill.off:hover {
  opacity: .85;
  border-color: rgba(124,58,237,.3);
  color: var(--t2);
}
/* ON — filled */
.task-pill.on {
  background: rgba(124,58,237,.18);
  border: 1px solid rgba(124,58,237,.4);
  color: var(--p3);
  box-shadow: 0 0 0 1px rgba(124,58,237,.1) inset;
}
.task-pill.on:hover {
  background: rgba(124,58,237,.28);
  border-color: rgba(124,58,237,.6);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(124,58,237,.25);
}
.task-pill.on:active, .task-pill.off:active { transform: scale(.93); }
[data-theme="light"] .task-pill.off {
  border-color: rgba(124,58,237,.15);
  color: var(--t3);
}
[data-theme="light"] .task-pill.on {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.32);
  color: var(--p1);
  box-shadow: none;
}

.tgl-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.tgl-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl-track {
  position: absolute; inset: 0; border-radius: 100px;
  background: rgba(255,255,255,.1); cursor: pointer; transition: background .3s ease;
}
.tgl-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--t3); transition: all .3s cubic-bezier(.175,.885,.32,1.3);
}
.tgl-switch input:checked ~ .tgl-track { background: var(--p1); }
.tgl-switch input:checked ~ .tgl-track .tgl-thumb {
  transform: translateX(20px); background: #fff;
}

/* Collapsible */
.collapse {
  overflow: hidden; max-height: 0;
  opacity: 0; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.collapse.open { max-height: 600px; opacity: 1; }

.div { height: 1px; background: linear-gradient(90deg,transparent,rgba(124,58,237,.3),rgba(37,99,235,.2),transparent); margin: 1.35rem 0; }

/* ─── Action bar ──────────────────────────────────────────── */
.action-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem;
  padding: .9rem 1.1rem;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  border-radius: var(--r);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--card-shadow);
}

/* ─── Btn reset ───────────────────────────────────────────── */
.btn-reset {
  width: 100%;
  padding: .7rem 1.2rem;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.18);
  border-radius: var(--r);
  color: #f87171;
  font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  letter-spacing: .03em;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .15s ease;
  box-shadow: 0 1px 4px rgba(239,68,68,.1);
}
[data-theme="light"] .btn-reset {
  background: rgba(239,68,68,.05);
  border-color: rgba(239,68,68,.2);
  color: #dc2626;
}
.btn-reset:hover {
  background: rgba(239,68,68,.13);
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 4px 18px rgba(239,68,68,.22);
}
.btn-reset:active { transform: scale(.97); }
.btn-reset-icon { transition: transform .55s cubic-bezier(.34,1.56,.64,1); flex-shrink: 0; }
.btn-reset:hover .btn-reset-icon { transform: rotate(-360deg); }

/* ─── Results actions bar ───────────────────────────────────── */
/* (export button moved to top-controls) */

/* ─── Btn export PDF ──────────────────────────────────────── */
.btn-export {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--t3); font-family: inherit; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-export:hover {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.4);
  color: var(--p3);
  box-shadow: 0 3px 14px rgba(124,58,237,.18);
}
.btn-export:active { transform: scale(.96); }
/* Spinner icon: hidden by default, shown during loading */
.btn-export-spinner { display: none; }
.btn-export.loading {
  pointer-events: none;
  opacity: .75;
}
.btn-export.loading .btn-export-icon    { display: none; }
.btn-export.loading .btn-export-spinner { display: block; animation: spin .7s linear infinite; }
.btn-export.loading .btn-export-label   { opacity: .6; }

/* ─── Toast warning ───────────────────────────────────── */
.toast {
  position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 200; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
  border-radius: 10px; padding: .65rem 1.1rem;
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: #fbbf24; font-weight: 600;
  backdrop-filter: blur(16px); animation: slideDown .25s ease;
  white-space: nowrap;
}
.toast[hidden] { display: none !important; }
[data-theme="light"] .toast {
  background: rgba(180,90,0,.08);
  border-color: rgba(180,90,0,.35);
  color: #92400e;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

[data-theme="light"] .btn-export:hover {
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.3);
  color: var(--p1);
}

/* calc button: full remaining width in action bar */
.action-bar .btn-calc { flex: 1; margin-top: 0; }

/* ─── Calc actions row (results-col) ──────────────────────── */
.calc-actions-row { display: flex; flex-direction: column; gap: .4rem; }
.calc-actions-row .btn-calc-wrap { display: block; width: 100%; }
.calc-actions-row .btn-calc { flex: unset; width: 100%; }
/* Secondary row: copy + reset side by side */
.calc-secondary-row { display: flex; gap: .4rem; }
.calc-secondary-row .btn-reset,
.calc-secondary-row .btn-copy { flex: 1; }

/* ─── Btn copy résumé ────────────────────────────────── */
.btn-copy {
  width: 100%; padding: .7rem 1rem;
  background: rgba(124,58,237,.07);
  border: 1px solid rgba(124,58,237,.2);
  border-radius: var(--r);
  color: var(--p3); font-family: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .15s ease;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  letter-spacing: .02em;
  box-shadow: 0 1px 4px rgba(124,58,237,.12);
}
[data-theme="light"] .btn-copy { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.2); color: #6d28d9; }
.btn-copy:hover {
  background: rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.38);
  box-shadow: 0 4px 18px rgba(124,58,237,.22);
}
.btn-copy:active { transform: scale(.97); }
.btn-copy.copy-ok {
  background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: #4ade80;
}
[data-theme="light"] .btn-copy.copy-ok { color: #16a34a; border-color: rgba(22,163,74,.3); background: rgba(22,163,74,.07); }

/* ─── Right column — 2 colonnes isolées ───────────────────── */
.right-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.5rem; align-items: start; }

/* ─── Cal-col : isolation totale du calendrier ─────────────── */
.cal-col { contain: layout; }

/* ─── Results-col : pile flex + sticky en desktop ──────────── */
.results-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
@media (min-width: 861px) {
  /* Les deux colonnes sont sticky — les panels ne bougent pas au scroll */
  .cal-col    { position: sticky; top: 1.5rem; align-self: start; }
  .results-col { position: sticky; top: 1.5rem; align-self: start; }
}

/* ─── Results glow — fired after calculation ──────────────── */
#resultsCard.results-lit {
  animation: resultsGlow 2.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes resultsGlow {
  0%   { box-shadow: var(--card-shadow); border-color: var(--border); }
  25%  { box-shadow: 0 0 0 1px rgba(124,58,237,.55), 0 8px 40px rgba(124,58,237,.45), 0 0 80px rgba(37,99,235,.2); border-color: rgba(124,58,237,.6); }
  70%  { box-shadow: 0 0 0 1px rgba(124,58,237,.3), 0 6px 30px rgba(124,58,237,.25); border-color: rgba(124,58,237,.35); }
  100% { box-shadow: var(--card-shadow); border-color: rgba(124,58,237,.2); }
}
[data-theme="light"] #resultsCard.results-lit {
  animation: resultsGlowLight 2.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes resultsGlowLight {
  0%   { box-shadow: var(--card-shadow); border-color: var(--border); }
  25%  { box-shadow: 0 0 0 1px rgba(124,58,237,.4), 0 8px 40px rgba(124,58,237,.2); border-color: rgba(124,58,237,.5); }
  100% { box-shadow: var(--card-shadow); border-color: rgba(124,58,237,.22); }
}

/* ─── Sparkline (Annuel card) ─────────────────────────────── */
.rc-sparkline {
  margin-top: .75rem;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
  opacity: 0;
  transition: opacity .5s ease .3s;
}
.rc-sparkline.spark-visible { opacity: 1; }
.spark-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  height: 100%;
}
.spark-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: var(--grd2);
  min-height: 3px;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}
.spark-lbl {
  font-size: .5rem;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.rc-sparkline-single {
  margin-top: .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  opacity: 0;
  transition: opacity .5s ease .3s;
}
.rc-sparkline-single.spark-visible { opacity: 1; }
.spark-line {
  flex: 1; height: 2px;
  background: var(--grd2);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(167,139,250,.4);
}
.spark-single-lbl {
  font-size: .6rem; font-weight: 700; color: var(--t3);
  white-space: nowrap;
}

/* ─── Calendar header ─────────────────────────────────────── */
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: .5rem; flex-wrap: wrap;
}
.cal-nav { display: flex; align-items: center; gap: .4rem; }
.cal-title {
  font-size: 1rem; font-weight: 800;
  min-width: 165px; text-align: center; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--t1) 0%, var(--p3) 55%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
[data-theme="light"] .cal-title {
  background: none; -webkit-text-fill-color: var(--t1); color: var(--t1);
}
.btn-nav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card);
  color: var(--t2); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 1rem;
  transition: all .2s ease; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-nav:hover  { background: rgba(124,58,237,.15); border-color: var(--p1); color: var(--t1); box-shadow: 0 0 0 4px rgba(124,58,237,.1); }
.btn-nav:active { background: rgba(124,58,237,.2); }

/* ─── Calendar actions (clear pill) ─────────────────────── */
.cal-actions {
  display: flex; justify-content: flex-end; margin-top: .9rem;
}
.btn-clear-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .9rem;
  background: transparent;
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 100px; font-family: inherit;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(239,68,68,.5);
  cursor: pointer; transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-clear-pill:hover {
  color: var(--red); border-color: rgba(239,68,68,.45);
  background: rgba(239,68,68,.07);
  box-shadow: 0 2px 12px rgba(239,68,68,.15);
}
.btn-clear-pill:active { transform: scale(.96); }

/* ─── Calendar grid ───────────────────────────────────────── */
.cal-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  column-gap: 2px; row-gap: 3px;
}
.dh {
  text-align: center; font-size: .6rem; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
  padding: .4rem 0 .6rem; opacity: .75;
}
.dh.wk { color: rgba(239,68,68,.65); opacity: 1; }

.dc {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
  position: relative; border: 1px solid transparent;
  user-select: none; color: var(--t1);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  min-height: 34px;
}
.dc.empty { cursor: default; }
.dc.sunday {
  color: rgba(239,68,68,.45); cursor: not-allowed; font-weight: 500;
}
.dc.holiday {
  color: #f87171; cursor: not-allowed; font-weight: 700;
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.2) !important;
  border-radius: 8px;
}
.dc.saturday {
  color: #60a5fa;
  background: rgba(37,99,235,.06);
  border-color: rgba(37,99,235,.08);
}
.dc.avail:hover {
  background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.35);
  color: var(--t1); transform: scale(1.05);
}
.dc.avail:active {
  background: rgba(124,58,237,.35); transform: scale(.95);
}
.dc.selected {
  background: var(--p1) !important; color: #fff !important;
  font-weight: 700; border-color: transparent !important;
  box-shadow: 0 2px 12px rgba(124,58,237,.5);
  transform: scale(1.06);
  z-index: 1;
}

/* ── Range selection band ─────────────────────────────────── */
/* Middle cells: lighter fill, no rounding, no scale */
.dc.range-mid {
  background: rgba(124,58,237,.22) !important;
  color: var(--p3) !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  font-weight: 600;
  z-index: 0;
}
/* Start: round left, flat right */
.dc.range-start {
  border-radius: 7px 0 0 7px !important;
  transform: none !important;
  box-shadow: none !important;
}
/* End: flat left, round right */
.dc.range-end {
  border-radius: 0 7px 7px 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Horizontal bridge that crosses the 1px column-gap */
.dc.range-start::before,
.dc.range-mid::before,
.dc.range-end::before {
  content: '';
  position: absolute; top: 18%; bottom: 18%;
  background: rgba(124,58,237,.18);
  z-index: -1;
  pointer-events: none;
}
.dc.range-start::before { left: 50%;   right: -3px; }
.dc.range-mid::before   { left: -3px;  right: -3px; }
.dc.range-end::before   { right: 50%;  left: -3px;  }
/* Light-mode range tints */
[data-theme="light"] .dc.range-mid {
  background: rgba(109,40,217,.15) !important;
  color: var(--p3) !important;
}
[data-theme="light"] .dc.range-start::before,
[data-theme="light"] .dc.range-mid::before,
[data-theme="light"] .dc.range-end::before {
  background: rgba(109,40,217,.12);
}
.dc.today {
  border-color: rgba(37,99,235,.6); color: #60a5fa;
  background: rgba(37,99,235,.12);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
  font-weight: 700;
}
.dc.today.selected { border-color: transparent; color: #fff; background: var(--p1) !important; }
.dc.today:not(.selected)::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: #60a5fa; box-shadow: 0 0 6px rgba(96,165,250,.8);
}

/* Light-mode calendar overrides */
[data-theme="light"] .h1-letter {
  background: linear-gradient(145deg,
    #9333ea 0%,
    #7c3aed 25%,
    #4f46e5 55%,
    #2563eb 80%,
    #0891b2 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 2px rgba(124,58,237,.2));
}
[data-theme="light"] .dc           { color: #1e1b4b; }
[data-theme="light"] .h1-by        { color: #6b7280; }
[data-theme="light"] .dc.saturday  { color: #2563eb; background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.12); }
[data-theme="light"] .dc.sunday   { color: rgba(220,38,38,.45); }
[data-theme="light"] .dc.holiday  {
  color: #dc2626; background: rgba(220,38,38,.1);
  border-color: rgba(220,38,38,.25) !important;
}
[data-theme="light"] .dc.avail:hover { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); color: #4c1d95; }
[data-theme="light"] .dc.today     { background: rgba(37,99,235,.1); border-color: rgba(37,99,235,.4); color: #1d4ed8; }
.hday-dot {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--red); opacity: .6;
}

/* ─── Calendar legend ─────────────────────────────────────── */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: .5rem .85rem; margin-top: .9rem;
}
.leg-item {
  display: flex; align-items: center; gap: .35rem;
  font-size: .68rem; color: var(--t3); font-weight: 500;
}
.leg-dot { width: 8px; height: 8px; border-radius: 2px; }

/* ─── Stats bar ───────────────────────────────────────────── */
.stats-bar { display: flex; gap: .65rem; margin-top: 1rem; }
.stat {
  flex: 1; padding: .8rem .75rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--rs); text-align: center; transition: all .25s ease;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.stat::before {
  content: ''; position: absolute; inset: 0;
  background: var(--stat-accent, var(--grd));
  opacity: 0; transition: opacity .25s ease;
}
.stat::after {
  content: ''; position: absolute; bottom: 0; left: 15%; right: 15%; height: 2px;
  background: var(--stat-accent, var(--grd)); border-radius: 2px 2px 0 0;
  opacity: .6; transition: opacity .25s ease;
}
.stat:hover { border-color: var(--border-h); }
.stat:hover::before { opacity: .04; }
.stat:hover::after  { opacity: 1; }
.stat-v {
  font-size: 1.55rem; font-weight: 800; line-height: 1;
  background: var(--stat-accent, var(--grd)); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.stat-l {
  font-size: .59rem; color: var(--t3); margin-top: 6px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.stat-icon-sm { width: 9px; height: 9px; flex-shrink: 0; opacity: .6; }
/* Stat 1: violet, Stat 2: teal */
.stat:nth-child(1) { --stat-accent: linear-gradient(135deg,#a78bfa,#818cf8); }
.stat:nth-child(2) { --stat-accent: linear-gradient(135deg,#34d399,#059669); }
[data-theme="light"] .stat { box-shadow: none; background: var(--stat-bg); }

/* ─── Warning banners ─────────────────────────────────────── */
.warn-bar[hidden] { display: none !important; }
.warn-bar {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .6rem .85rem;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.28);
  border-radius: var(--rs);
  font-size: .72rem; color: #fbbf24; line-height: 1.5;
  animation: fadeIn .2s ease;
  margin-bottom: .5rem;
}
.warn-bar svg    { flex-shrink: 0; margin-top: .18rem; color: #f59e0b; }
.warn-bar strong { font-weight: 700; color: #f59e0b; }
[data-theme="light"] .warn-bar { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.32); color: #92400e; }
[data-theme="light"] .warn-bar strong { color: #78350f; }
[data-theme="light"] .warn-bar svg    { color: #d97706; }

/* ─── Option panels (Samedi / Tâches) ─────────────────────── */
.opt-panel {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: .85rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.opt-panel:focus-within,
.opt-panel:has(.tgl-row:hover) { border-color: var(--border-h); }
/* Active toggle → accent border */
.opt-panel:has(input:checked) {
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 0 0 1px rgba(124,58,237,.1) inset;
}
[data-theme="light"] .opt-panel:has(input:checked) {
  border-color: rgba(124,58,237,.32);
  box-shadow: none;
}

/* tgl-row inside opt-panel: no own border/radius/margin */
.opt-panel .tgl-row {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  background: rgba(255,255,255,.035);
  transition: background .2s ease;
}
[data-theme="light"] .opt-panel .tgl-row { background: rgba(139,92,246,.04); }
.opt-panel .tgl-row:hover { background: rgba(255,255,255,.065); }
[data-theme="light"] .opt-panel .tgl-row:hover { background: rgba(139,92,246,.08); }
/* Header tint when checked */
.opt-panel:has(input:checked) .tgl-row { background: rgba(124,58,237,.08); }
[data-theme="light"] .opt-panel:has(input:checked) .tgl-row { background: rgba(124,58,237,.06); }

/* Warn-bars directly inside panel (above collapse) — flush edges */
.opt-panel > .warn-bar {
  margin: 0;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid rgba(245,158,11,.25);
  animation: none;
}

/* Pills block flush, consistent separator color */
.opt-panel .task-pills-block {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid var(--border);
  background: rgba(124,58,237,.04);
}
[data-theme="light"] .opt-panel .task-pills-block { background: rgba(124,58,237,.04); }

/* Collapse section: separator + slightly recessed body */
.opt-panel .collapse.open {
  border-top: 1px solid var(--border);
  max-height: 600px;
}

/* ─── Task dropdown (prestations) ────────────────────────── */
.task-dropdown {
  border-bottom: 1px solid var(--border);
}
.task-dd-trigger {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  padding: .65rem 1rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--t2); font-family: inherit; font-size: .8rem; font-weight: 600;
  text-align: left; transition: background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.task-dd-trigger:hover { background: rgba(124,58,237,.07); }
.task-dd-trigger.open  { color: var(--p3); }
.task-dd-icon  { font-size: .85rem; flex-shrink: 0; }
.task-dd-label { flex: 1; }
.task-dd-chevron {
  flex-shrink: 0; color: var(--t3);
  transition: transform .22s ease, color .18s ease;
}
.task-dd-trigger.open .task-dd-chevron { transform: rotate(180deg); color: var(--p3); }
.task-dd-list {
  overflow: hidden; max-height: 0;
  transition: max-height .28s cubic-bezier(.4,0,.2,1);
}
.task-dd-list.open { max-height: 260px; }
.task-dd-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .48rem 1rem .48rem 1.35rem;
  font-size: .8rem; color: var(--t2); cursor: pointer;
  transition: background .15s ease;
  user-select: none;
}
.task-dd-item:last-child { margin-bottom: .25rem; }
.task-dd-item:hover { background: rgba(124,58,237,.07); color: var(--t1); }
.task-dd-item input[type="checkbox"] {
  width: 14px; height: 14px; flex-shrink: 0;
  accent-color: var(--p1); cursor: pointer;
}
[data-theme="light"] .task-dd-trigger:hover { background: rgba(124,58,237,.06); }
[data-theme="light"] .task-dd-item:hover    { background: rgba(124,58,237,.06); }

/* Inline warn inside collapse */
.opt-warn-inline {
  margin: 0;
  border-radius: 0;
  border-left: none; border-right: none; border-top: none;
  border-bottom: 1px solid rgba(245,158,11,.25);
  animation: none;
  margin-bottom: 0;
}

/* Body area: slightly recessed */
.opt-panel-body {
  padding: .75rem 1rem .9rem;
  background: rgba(0,0,0,.1);
}
[data-theme="light"] .opt-panel-body { background: rgba(139,92,246,.03); }
#calTooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--card); border: 1px solid rgba(239,68,68,.45);
  color: #f87171; font-size: .7rem; font-weight: 700;
  padding: .3rem .7rem; border-radius: 7px;
  white-space: nowrap; font-family: inherit;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  letter-spacing: .02em;
}
[data-theme="light"] #calTooltip {
  background: #fff; color: #dc2626;
  border-color: rgba(220,38,38,.35);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ─── Results ─────────────────────────────────────────────── */
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.rc {
  background: rgba(255,255,255,.07); border: 1px solid var(--border);
  border-radius: var(--r); padding: 1.1rem 1.25rem;
  position: relative;
  transition: all .28s ease; cursor: default;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: .5rem;
}
[data-theme="light"] .rc { background: rgba(255,255,255,.9); }
.rc:hover { transform: translateY(-3px); z-index: 2; border-color: var(--border-h); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.rc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grd); opacity: .45; transition: opacity .28s ease;
  border-radius: var(--r) var(--r) 0 0;
}
.rc:hover::before { opacity: 1; }
.rc.big {
  grid-column: 1 / -1;
  background:
    linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(37,99,235,.12) 50%, rgba(14,165,233,.07) 100%);
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 4px 32px rgba(124,58,237,.2), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 1.25rem 1.5rem;
}
.rc.big::before { opacity: 1; }
[data-theme="light"] .rc.big { background: linear-gradient(135deg,rgba(124,58,237,.08),rgba(37,99,235,.05)); }
/* Card header: icon + label row */
.rc-header {
  display: flex; align-items: center; gap: .5rem;
}
/* Icon bubble */
.rc-icon-wrap {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #a78bfa;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.rc:hover .rc-icon-wrap {
  background: rgba(124,58,237,.15);
  border-color: rgba(124,58,237,.3);
  box-shadow: 0 0 12px rgba(124,58,237,.28);
  color: #c4b5fd;
}
[data-theme="light"] .rc-icon-wrap { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.14); color: #7c3aed; }
[data-theme="light"] .rc:hover .rc-icon-wrap { background: rgba(124,58,237,.14); color: #5b21b6; }
.rc.big .rc-icon-wrap {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #a78bfa;
}
.rc-icon { display: block; flex-shrink: 0; }
/* Label text */
.rc-lbl {
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  text-transform: none; color: var(--t2);
  display: flex; align-items: center; gap: .4rem; flex: 1;
}
.rc.big .rc-lbl { font-size: .68rem; font-weight: 600; color: var(--p3); }

.rc-amount {
  display: flex; align-items: baseline; gap: .35rem;
  min-width: 0;
}
.rc-val {
  font-size: clamp(.95rem, 1.4vw, 1.15rem); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #d4bbff 0%, #7dd3fc 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .rc-val {
  background: linear-gradient(135deg, #6d28d9 0%, #1d4ed8 100%);
  -webkit-background-clip: text; background-clip: text;
}
.rc.big .rc-val {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 40%, #93c5fd 100%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"] .rc.big .rc-val {
  background: linear-gradient(135deg, #5b21b6 0%, #1e40af 100%);
  -webkit-background-clip: text; background-clip: text;
}
.rc-unit {
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(135deg, #d4bbff, #7dd3fc);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .75;
}
[data-theme="light"] .rc-unit {
  background: linear-gradient(135deg, #6d28d9, #1d4ed8);
  -webkit-background-clip: text; background-clip: text;
}

@keyframes valUp { from{transform:translateY(-6px);opacity:0} to{transform:translateY(0);opacity:1} }
.animate { animation: valUp .28s ease forwards; }

/* ─── Calculate button ────────────────────────────────────── */
.btn-calc-wrap {
  display: block;
  position: relative;
  width: 100%;
}
.btn-calc-wrap[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e1b4b;
  color: #e0e7ff;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 8px;
  border: 1px solid rgba(139,92,246,.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 99;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.btn-calc-wrap[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(139,92,246,.35);
  pointer-events: none;
  z-index: 99;
}
[data-theme="light"] .btn-calc-wrap[data-tooltip]:hover::after {
  background: #fff;
  color: #3730a3;
  border-color: rgba(99,102,241,.3);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
[data-theme="light"] .btn-calc-wrap[data-tooltip]:hover::before {
  border-top-color: rgba(99,102,241,.3);
}
.btn-calc {
  width: 100%;
  padding: .9rem 1.5rem;
  /* multi-stop gradient that animates seamlessly */
  background: linear-gradient(110deg,
    #3b0764 0%,
    #4f46e5 28%,
    #2563eb 52%,
    #7c3aed 75%,
    #3b0764 100%);
  background-size: 300% 300%;
  border: 1px solid rgba(167,139,250,.25);
  border-radius: var(--r);
  color: #fff; font-family: inherit; font-size: .9rem; font-weight: 650;
  letter-spacing: .04em; cursor: pointer;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  /* layered shadow: ambient + inner top highlight */
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 4px 20px rgba(79,70,229,.5),
    0 1px 4px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s ease;
  animation: btnAurora 7s ease infinite;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  will-change: transform;
}
.btn-calc:hover {
  transform: translateY(-2px);
  border-color: rgba(167,139,250,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 12px 40px rgba(79,70,229,.65),
    0 2px 8px rgba(0,0,0,.35);
}
.btn-calc:active { transform: scale(.98) translateY(0); }
.btn-calc:disabled { cursor: not-allowed; opacity: .7; }
.btn-calc.calc-blocked {
  background: var(--card) !important;
  border: 1px solid var(--border);
  color: var(--t3) !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 1;
  cursor: not-allowed;
  filter: none !important;
  overflow: visible;
}
.btn-calc.calc-blocked::after {
  content: '⚠ Vérifiez les avertissements de sélection';
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--t2);
  font-size: .72rem;
  font-weight: 500;
  padding: .4rem .85rem;
  border-radius: .5rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  z-index: 10;
}
.btn-calc.calc-blocked:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.btn-calc.calc-blocked .btn-calc-icon,
.btn-calc.calc-blocked .btn-calc-arrow { color: var(--t3); opacity: .5; }
.btn-calc.calc-blocked .btn-calc-label { color: var(--t3); }
.btn-calc.calc-blocked::before { display: none; }

/* Shimmer sweep — finer, faster */
.btn-calc::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 40%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.08) 60%,
    transparent 100%);
  transform: skewX(-18deg); transition: left .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-calc:hover::before { left: 160%; }

@keyframes btnAurora {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
.btn-calc-icon  { flex-shrink:0; transition: transform .35s cubic-bezier(.34,1.56,.64,1); opacity: .9; }
.btn-calc-arrow { flex-shrink:0; transition: transform .3s ease, opacity .3s ease; opacity: .55; }
.btn-calc:hover .btn-calc-icon  { transform: scale(1.2) rotate(-15deg); opacity: 1; }
.btn-calc:hover .btn-calc-arrow { transform: translateX(5px); opacity: 1; }

/* Loading state */
.btn-calc.calc-loading .btn-calc-icon { animation: iconSpin .8s linear infinite; }
.btn-calc.calc-loading .btn-calc-label::after { content: ''; }
.btn-calc.calc-loading { animation: btnAurora 1.4s ease infinite; }
.btn-calc.calc-loading .btn-calc-arrow { opacity: 0; }

/* Success state */
.btn-calc.calc-success {
  background: linear-gradient(110deg, #065f46, #10b981, #34d399, #059669, #065f46);
  background-size: 300% 300%;
  border-color: rgba(52,211,153,.3);
  box-shadow: 0 4px 24px rgba(16,185,129,.5), 0 1px 0 rgba(255,255,255,.12) inset;
  animation: btnAurora 2s ease infinite;
}
.btn-calc.calc-success .btn-calc-label::before { content: '✓  '; }
@keyframes iconSpin { to { transform: rotate(360deg); } }

/* ─── Results overlay ─────────────────────────────────────── */
/* Panel fixes : overflow-y auto + max-height plafonnent la taille de la carte.
   Le contenu (monthBreakdown) défile à l'intérieur — la carte ne grandit pas. */
#resultsCard {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  contain: layout;
  max-height: calc(100vh - 3rem);
  scroll-behavior: smooth;
}
.calc-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(8,8,20,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
[data-theme="light"] .calc-overlay { background: rgba(240,236,255,.92); }
.calc-overlay.calc-active { opacity: 1; pointer-events: auto; }
.calc-overlay.calc-done   { opacity: 0; pointer-events: none; transition: opacity .5s ease .1s; }

/* SVG progress ring */
.calc-ring { position: relative; width: 100px; height: 100px; }
.calc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(124,58,237,.15); stroke-width: 5; }
.ring-fill  {
  fill: none; stroke: url(#ringGrad); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 264; stroke-dashoffset: 264;
}
.calc-overlay.calc-active .ring-fill {
  animation: ringFill 2s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ringFill { to { stroke-dashoffset: 0; } }

.calc-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 800;
  background: var(--grd); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calc-ov-label {
  font-size: .82rem; font-weight: 600; color: var(--t2);
  letter-spacing: .1em; text-transform: uppercase;
}
.calc-dots { display: flex; gap: .45rem; }
.calc-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--p1);
  animation: dotPop 1.2s ease-in-out infinite;
}
.calc-dots span:nth-child(2) { animation-delay: .2s; background: #38bdf8; }
.calc-dots span:nth-child(3) { animation-delay: .4s; background: #e879f9; }
@keyframes dotPop {
  0%,80%,100% { transform: scale(.6); opacity: .35; }
  40%         { transform: scale(1.3); opacity: 1; }
}

/* ─── Results card reveal — no scale, no brightness (prevent layout shift) ── */
.rc-in {
  animation: rcReveal .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--ri, 0) * .1s + .04s);
  will-change: transform, opacity;
}
@keyframes rcReveal {
  0%   { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ─── Info banner ─────────────────────────────────────────── */
.info-bar {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .55rem .8rem; margin-top: .85rem;
  background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.12);
  border-radius: var(--rs); font-size: .74rem; color: rgba(239,68,68,.6);
  line-height: 1.4;
}
.info-bar svg { flex-shrink: 0; margin-top: 1px; }

/* ─── Animations ──────────────────────────────────────────── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.card { animation: fadeDown .5s ease both; }
.cal-col     > .card { animation-delay: .1s; }
.results-col > .card { animation-delay: .18s; }

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124,58,237,.45), rgba(37,99,235,.35));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124,58,237,.7), rgba(37,99,235,.55));
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — tablet ≤ 860px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; }
  .right-col { gap: 1rem; }
  .right-col { grid-template-columns: 1fr; }
  .results-col { position: static; }
  .cal-col    { position: static; }
  .wrap { padding: 2rem 1rem 3rem; }
  /* Horloge masquée sur tablette/mobile : elle empiète sur le header centré */
  .live-clock { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — mobile ≤ 600px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .wrap { padding: 1.25rem .85rem 2.5rem; }

  header { margin-bottom: 1.75rem; }
  h1 { font-size: clamp(1.5rem,7vw,2rem); }
  .sub { font-size: .82rem; }
  .right-col { gap: .85rem; }
  .action-bar { flex-direction: column; padding: .9rem 1rem; }
  .action-bar .btn-calc { width: 100%; flex: unset; }

  .card { padding: 1.15rem 1rem; border-radius: 14px; }
  .card-title { margin-bottom: 1rem; }

  /* Inputs: bigger touch targets */
  .step-btn { width: 38px; }
  .inp-row input { padding: .85rem .5rem; font-size: .9rem; }

  /* Toggle rows */
  .tgl-row { padding: .75rem; }
  .tgl-switch { width: 46px; height: 26px; }

  /* Calendar: compress header on small phones */
  .cal-title { min-width: 130px; font-size: .82rem; }
  .dh { font-size: .58rem; padding: .3rem 0 .5rem; }
  .dc { font-size: .75rem; border-radius: 5px; min-height: 38px; }

  /* Results */
  .res-grid { grid-template-columns: 1fr 1fr; }
  .rc { padding: .9rem 1rem; }
  .rc-lbl { font-size: .56rem; }
  .rc-val { font-size: .82rem; }
  .rc.big .rc-val { font-size: 1.05rem; }
  .rc.big { grid-column: 1 / -1; }

  /* Stats */
  .stat-v { font-size: 1.2rem; }
  .stat-l { font-size: .58rem; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — very small phones ≤ 380px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .wrap { padding: 1rem .7rem 2rem; }
  .card { padding: 1rem .85rem; }

  .cal-title { min-width: 110px; font-size: .78rem; }
  .dh { font-size: .52rem; letter-spacing: 0; }
  .dc { font-size: .7rem; border-radius: 4px; }

  .res-grid { gap: .45rem; grid-template-columns: 1fr; }
  .rc.big { grid-column: 1; }
  .rc-val { font-size: .76rem; }
  .rc.big .rc-val { font-size: .95rem; }
}

/* ─── Monthly ratio breakdown (calendar area) ────────────── */
.month-ratios {
  margin-top: .9rem;
  border: 1px solid rgba(124,58,237,.22);
  border-radius: var(--rs);
  overflow: hidden;
  background: rgba(124,58,237,.04);
}
[data-theme="light"] .month-ratios { background: rgba(124,58,237,.04); border-color: rgba(124,58,237,.18); }
.mr-title {
  font-size: .6rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--t3);
  padding: .45rem .75rem;
  border-bottom: 1px solid rgba(124,58,237,.12);
  display: flex; align-items: center; gap: .4rem;
}
.mr-title::before { content:''; width:3px; height:10px; border-radius:2px; background:var(--grd); flex-shrink:0; }
.mr-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .75rem;
  font-size: .73rem;
  border-bottom: 1px solid rgba(124,58,237,.07);
}
.mr-row:last-child { border-bottom: none; }
.mr-month { flex: 1; font-weight: 600; color: var(--t2); }
.mr-days  {
  color: var(--t3); font-size: .68rem; font-weight: 600; white-space: nowrap;
  background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.18);
  border-radius: 100px; padding: .1rem .48rem;
}
[data-theme="light"] .mr-days { background: rgba(124,58,237,.08); }
.mr-ratio {
  min-width: 44px; text-align: right;
  font-weight: 800; font-size: .82rem;
  background: var(--grd2); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Monthly breakdown (results card) ────────────────────── */
.month-breakdown {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: var(--rs);
  background: rgba(124,58,237,.04);
  border: 1px solid transparent;
  margin-top: 0;
  transition:
    max-height .7s cubic-bezier(.22,1,.36,1),
    opacity    .45s ease .06s,
    border-color .35s ease,
    margin-top .5s cubic-bezier(.22,1,.36,1);
}
.month-breakdown.bd-open {
  max-height: 320px;
  overflow-y: auto;
  opacity: 1;
  border-color: rgba(124,58,237,.22);
  margin-top: 1rem;
}
[data-theme="light"] .month-breakdown.bd-open {
  background: rgba(124,58,237,.03);
  border-color: rgba(124,58,237,.16);
}
/* Header block (title + subtitle) */
.mb-header {
  padding: .5rem .85rem .45rem;
  border-bottom: 1px solid rgba(124,58,237,.12);
  background: rgba(124,58,237,.05);
}
[data-theme="light"] .mb-header { background: rgba(124,58,237,.04); }
.mb-title {
  font-size: .6rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--t3);
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .18rem;
}
.mb-title::before { content:''; width:3px; height:10px; border-radius:2px; background:var(--grd); flex-shrink:0; }
.mb-subtitle {
  font-size: .65rem; color: var(--t3); font-weight: 400; font-style: italic;
  padding-left: .85rem; opacity: .7;
}
/* Row layout: left (month + meta) / right (label + price) */
.mb-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid rgba(124,58,237,.07);
  transition: background .15s ease;
}
.mb-row:last-child { border-bottom: none; }
.mb-row:hover { background: rgba(124,58,237,.06); }
.mb-left  { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.mb-month { font-weight: 700; font-size: .82rem; color: var(--t1); }
.mb-meta  {
  font-size: .67rem; color: var(--t3); font-weight: 500;
}
.mb-meta strong { color: var(--p3); font-weight: 700; }
/* ─── Month proportion bar ────────────────────────────── */
.mb-bar-track {
  height: 3px; background: rgba(124,58,237,.12);
  border-radius: 99px; overflow: hidden; margin: .2rem 0 .12rem;
}
.mb-bar-fill {
  height: 100%; border-radius: 99px; background: var(--grd);
  animation: barGrow .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--delay, 0ms);
  width: var(--pct, 0%);
}
@keyframes barGrow { from { width: 0%; } to { width: var(--pct, 0%); } }
.mb-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .08rem; flex-shrink: 0;
}
.mb-prix-lbl {
  font-size: .58rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t3); opacity: .65;
}
.mb-prix  {
  min-width: 80px; text-align: right;
  font-weight: 800; font-size: .97rem;
  background: var(--grd); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}


/* =================================================================
   HISTORIQUE PANEL (in results-col)
   ================================================================= */
.hist-panel {
  margin-top: .75rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
[data-theme="light"] .hist-panel { background: rgba(255,255,255,.6); }

.hist-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem .85rem .55rem;
  border-bottom: 1px solid var(--border);
}
.hist-panel-title {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--p3); opacity: .8;
}
.hist-clear {
  display: flex; align-items: center; gap: .3rem;
  background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.16);
  color: #f87171; border-radius: 7px;
  padding: .22rem .55rem; font-size: .7rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .18s ease;
}
.hist-clear:hover { background: rgba(239,68,68,.18); }

/* Empty state */
.hist-empty {
  padding: 1.6rem 1rem 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center;
}
.hist-empty-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--p3); opacity: .6;
  animation: histEmptyPulse 3s ease-in-out infinite;
}
@keyframes histEmptyPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: .85; transform: scale(1.06); }
}
.hist-empty-text {
  font-size: .82rem; font-weight: 700; color: var(--t2); opacity: .7;
  margin-top: .1rem;
}
.hist-empty-sub {
  font-size: .72rem; color: var(--t3); line-height: 1.4; max-width: 180px;
}

/* Content area */
.hist-content { padding: .65rem .65rem .7rem; }

/* History cards — vertical stack in narrow column */
.hist-cards {
  display: flex; flex-direction: column; gap: .45rem;
  margin-bottom: .9rem;
}
.hc {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid var(--hc-color, #a855f7);
  border-radius: var(--r);
  padding: .6rem .75rem;
  display: flex; flex-direction: column; gap: .4rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hc:hover { transform: translateX(2px); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
[data-theme="light"] .hc { background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.06); }
.hc-top { display: flex; align-items: center; gap: .45rem; }
.hc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hc-meta { min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.hc-date { font-size: .7rem; font-weight: 600; color: var(--t2); line-height: 1.2; }
.hc-njours { font-size: .64rem; color: var(--t3); }
.hc-vals {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .18rem .5rem;
}
.hc-val-item { display: flex; justify-content: space-between; font-size: .7rem; }
.hc-val-lbl { color: var(--t3); font-weight: 500; }
.hc-val-num { color: var(--t2); font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-annuel .hc-val-num { color: var(--hc-color, #a855f7); }

/* Chart section */
.hist-chart-section { margin-top: .2rem; }
.hist-chart-title {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 600; color: var(--t3);
  margin-bottom: .55rem; letter-spacing: .05em; text-transform: uppercase;
}
.hist-chart-wrap { border-radius: calc(var(--r) - 2px); overflow: hidden; }
.hist-chart-wrap canvas { display: block; }

/* =================================================================
   HIST CARD — clickable
   ================================================================= */
.hc { cursor: pointer; }
.hc-arrow { color: var(--t3); margin-left: auto; flex-shrink: 0; opacity: .5; transition: opacity .18s, transform .18s; }
.hc:hover .hc-arrow { opacity: 1; transform: translateX(2px); }

/* =================================================================
   HIST DETAIL MODAL
   ================================================================= */
.hd-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: hdFadeIn .18s ease;
}
@keyframes hdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.hd-modal {
  background: #0f1020;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: calc(var(--r) * 1.5);
  width: 100%; max-width: 420px; max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.7);
  animation: hdSlideUp .22s cubic-bezier(.16,1,.3,1);
}
@keyframes hdSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
[data-theme="light"] .hd-modal { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 16px 48px rgba(0,0,0,.18); }

.hd-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.hd-modal-title {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; color: var(--p3);
  letter-spacing: .04em; text-transform: uppercase;
}
.hd-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: var(--t3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .16s, color .16s;
}
.hd-close:hover { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.2); }
[data-theme="light"] .hd-close { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }

.hd-modal-body {
  overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .9rem;
}

.hd-meta-row {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .65rem .75rem;
  background: rgba(168,85,247,.07); border: 1px solid rgba(168,85,247,.14);
  border-radius: var(--r);
}
.hd-meta-date { font-size: .8rem; font-weight: 700; color: var(--t2); }
.hd-meta-period { font-size: .72rem; color: var(--t3); }

.hd-section-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--t3); margin-bottom: -.3rem;
}

.hd-params {
  display: flex; flex-direction: column; gap: .3rem;
}
.hd-param {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; padding: .3rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
[data-theme="light"] .hd-param { border-bottom-color: rgba(0,0,0,.05); }
.hd-param-lbl { color: var(--t3); font-weight: 500; }
.hd-param-val { color: var(--t2); font-weight: 700; font-variant-numeric: tabular-nums; }

.hd-results {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.hd-res-item {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r); padding: .55rem .7rem;
  display: flex; flex-direction: column; gap: .18rem;
}
[data-theme="light"] .hd-res-item { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07); }
.hd-res-annuel { grid-column: 1 / -1; border-color: rgba(168,85,247,.2); background: rgba(168,85,247,.06); }
.hd-res-lbl { font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--t3); }
.hd-res-val { font-size: .95rem; font-weight: 800; color: var(--t2); font-variant-numeric: tabular-nums; }
.hd-res-annuel .hd-res-val { color: #a855f7; font-size: 1.05rem; }

.hd-month-list {
  display: flex; flex-direction: column; gap: .22rem; margin-top: .25rem;
}
.hd-month-row {
  display: flex; align-items: center; gap: .5rem; font-size: .76rem;
  padding: .28rem .1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
[data-theme="light"] .hd-month-row { border-bottom-color: rgba(0,0,0,.05); }
.hd-month-lbl { flex: 1; color: var(--t2); font-weight: 600; }
.hd-month-days { color: var(--t3); font-size: .68rem; min-width: 28px; text-align: right; }
.hd-month-prix { color: var(--p3); font-weight: 700; min-width: 68px; text-align: right; font-variant-numeric: tabular-nums; }

/* =================================================================
   HIST DETAIL — Jours de prestation
   ================================================================= */
.hd-prest-month {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--t3);
  margin: .55rem 0 .3rem;
}
.hd-prest-days {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.hd-prest-tag {
  font-size: .72rem; font-weight: 600;
  padding: .2rem .55rem; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
  color: var(--t2);
}
[data-theme="light"] .hd-prest-tag {
  border-color: rgba(0,0,0,.09);
}
.hd-prest-sat-tag {
  background: rgba(37,99,235,.1);
  border-color: rgba(37,99,235,.25);
  color: #60a5fa;
}
[data-theme="light"] .hd-prest-sat-tag {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.2);
  color: #2563eb;
}
.hd-prest-tache-tag {
  background: rgba(251,146,60,.1);
  border-color: rgba(251,146,60,.25);
  color: #fb923c;
}
[data-theme="light"] .hd-prest-tache-tag {
  background: rgba(234,88,12,.07);
  border-color: rgba(234,88,12,.2);
  color: #ea580c;
}
.hd-prest-dur {
  font-size: .72rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 20px;
  background: rgba(251,146,60,.06);
  border: 1px dashed rgba(251,146,60,.3);
  color: #fb923c;
  align-self: center;
}
[data-theme="light"] .hd-prest-dur {
  background: rgba(234,88,12,.05);
  border-color: rgba(234,88,12,.25);
  color: #ea580c;
}

/* =================================================================
   HIST DETAIL — Monthly enriched
   ================================================================= */


/* Override old simple row to new two-column layout */
.hd-month-row {
  display: flex !important;
  align-items: center;
  gap: .75rem;
  padding: .4rem .1rem !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
[data-theme="light"] .hd-month-row { border-bottom-color: rgba(0,0,0,.05); }

.hd-month-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.hd-month-right { text-align: right; flex-shrink: 0; }

.hd-month-meta {
  font-size: .66rem; color: var(--t3);
}
.hd-month-meta strong { color: var(--t2); }

.hd-month-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden; margin-top: .1rem;
}
[data-theme="light"] .hd-month-bar { background: rgba(0,0,0,.07); }
.hd-month-bar-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #a855f7, #38bdf8);
  transition: width .4s ease;
}

.hd-month-formula {
  display: block; font-size: .62rem; color: var(--t3); margin-bottom: .08rem;
}
/* Override old .hd-month-prix */
.hd-month-prix {
  display: block;
  font-size: .82rem !important;
  font-weight: 800 !important;
  color: var(--p3) !important;
  text-align: right;
}

/* =================================================================
   HIST DETAIL — Days within monthly row
   ================================================================= */
.hd-month-days-wrap {
  display: flex; flex-wrap: wrap; gap: .2rem;
  margin-top: .3rem;
}