@charset "UTF-8";
/* Scène animée du hero : la nuit de l'assistant, puis le point du matin.
   CSS pur (la CSP du site interdit le JavaScript). Boucle de 24 s :
   0–45 %  nuit : 4 demandes arrivent et sont traitées une à une
   45–51 % l'aube : la nuit s'efface
   50–71 % le message de 8:00 se compose ligne par ligne, puis reste affiché
   94–100 % retour à la nuit.
   Le message du matin est le vrai contenu (lisible sans animation) ; la nuit est décorative (aria-hidden).
   Les keyframes sc-row/sc-wait/sc-tag/sc-day sont calées sur ce découpage : modifier les pourcentages ensemble. */

.scene{position:relative;overflow:hidden;--d:24s}
.scene-toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* La nuit, posée par-dessus le message du matin */
.night{position:absolute;inset:0;z-index:2;background:var(--ink);color:var(--paper);border-radius:20px;padding:26px;display:flex;flex-direction:column;animation:sc-night var(--d) infinite}
.night::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 50% 115%,rgba(232,196,120,.55),rgba(251,217,198,.18) 45%,transparent 70%);opacity:0;animation:sc-dawn var(--d) infinite}
.night-head{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:18px;margin-bottom:6px}
.moon{width:18px;height:18px;border-radius:50%;box-shadow:inset -6px -3px 0 0 #f1e6c4;transform:rotate(-20deg);flex:none}
.night-work{margin-left:auto;white-space:nowrap;display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:14px;opacity:.75}
.night-work i{width:8px;height:8px;border-radius:50%;background:#f3d27a;animation:sc-pulse 1.6s ease-in-out infinite}
.night-sub{font-size:15px;opacity:.7;margin:0 0 14px}
.night-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.n{position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;background:rgba(250,251,248,.07);border:1px solid rgba(250,251,248,.14);border-radius:14px;padding:12px 14px;font-size:15.5px;line-height:1.35;opacity:0}
.n time{font-family:var(--display);font-weight:700;font-size:17px;color:var(--olive-soft)}
.n b{display:block;font-weight:700}
.n span{opacity:.8}
.n-state{position:relative;min-width:96px;height:30px;display:grid;place-items:center end}
.n-wait,.n-tag{grid-area:1/1;opacity:0}
.n-wait{display:flex;gap:4px;padding-right:10px}
.n-wait i{width:6px;height:6px;border-radius:50%;background:var(--paper);opacity:.5;animation:sc-dots 1s ease-in-out infinite}
.n-wait i:nth-child(2){animation-delay:.15s}.n-wait i:nth-child(3){animation-delay:.3s}
.n-tag{background:var(--olive-soft);color:#9c3b19;font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;white-space:nowrap}
.n-tag.you{background:transparent;color:#f1e6c4;border:1.5px solid #f1e6c4}

.n1{animation:sc-row1 var(--d) infinite}.n2{animation:sc-row2 var(--d) infinite}.n3{animation:sc-row3 var(--d) infinite}.n4{animation:sc-row4 var(--d) infinite}
.n1 .n-wait{animation:sc-wait1 var(--d) infinite}.n2 .n-wait{animation:sc-wait2 var(--d) infinite}.n3 .n-wait{animation:sc-wait3 var(--d) infinite}.n4 .n-wait{animation:sc-wait4 var(--d) infinite}
.n1 .n-tag{animation:sc-tag1 var(--d) infinite}.n2 .n-tag{animation:sc-tag2 var(--d) infinite}.n3 .n-tag{animation:sc-tag3 var(--d) infinite}.n4 .n-tag{animation:sc-tag4 var(--d) infinite}

/* Le matin : le message se compose ligne par ligne */
.scene .recap-head{animation:sc-day1 var(--d) infinite}
.scene .recap-hello{animation:sc-day2 var(--d) infinite}
.scene .recap-list li:nth-child(1){animation:sc-day3 var(--d) infinite}
.scene .recap-list li:nth-child(2){animation:sc-day4 var(--d) infinite}
.scene .recap-list li:nth-child(3){animation:sc-day5 var(--d) infinite}
.scene .recap-list li:nth-child(4){animation:sc-day6 var(--d) infinite}
.scene .recap-list li:nth-child(5){animation:sc-day7 var(--d) infinite}
.scene .recap-dot{animation:sc-ring 2s ease-out infinite}

/* La légende reste visible et cliquable pendant la nuit */
.scene figcaption{position:relative;z-index:3;animation:sc-cap var(--d) infinite}

/* Bouton arrêter / relancer (case à cocher, sans JavaScript) */
.scene-ctrl{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-weight:700;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.scene-ctrl .on{display:none}
.scene-toggle:checked ~ figcaption .scene-ctrl .off{display:none}
.scene-toggle:checked ~ figcaption .scene-ctrl .on{display:inline}
.scene-toggle:focus-visible ~ figcaption .scene-ctrl{outline:3px solid var(--olive);outline-offset:3px;border-radius:4px}

/* Arrêt demandé ou mouvement réduit : on montre directement le message du matin */
.scene-toggle:checked ~ .night{display:none}
.scene-toggle:checked ~ figcaption,.scene-toggle:checked ~ .recap-head,.scene-toggle:checked ~ .recap-hello,.scene-toggle:checked ~ .recap-list li,.scene-toggle:checked ~ .recap-head .recap-dot,.scene-toggle:checked ~ .recap-list li{animation:none}
@media (prefers-reduced-motion:reduce){
  .scene .night{display:none}
  .scene *{animation:none!important}
  .scene-ctrl{display:none}
}

@media (max-width:600px){
  .night{padding:20px 16px}
  .n{grid-template-columns:44px 1fr;gap:4px 10px;padding:10px 12px;font-size:14.5px}
  .n time{font-size:15px}
  .n-state{grid-column:2;place-items:center start;min-width:0;height:28px}
  .n-wait{padding:0 0 0 2px}
  .night-work{display:none}
}

@keyframes sc-night{0%,45%{opacity:1;visibility:visible}51%,94%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes sc-cap{0%,45%{color:rgba(250,251,248,.72)}51%,94%{color:var(--muted)}100%{color:rgba(250,251,248,.72)}}
@keyframes sc-dawn{0%,34%{opacity:0}44%{opacity:1}100%{opacity:0}}
@keyframes sc-pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sc-dots{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-4px);opacity:.9}}
@keyframes sc-ring{0%{box-shadow:0 0 0 0 rgba(217,88,43,.45)}70%{box-shadow:0 0 0 9px rgba(217,88,43,0)}100%{box-shadow:0 0 0 0 rgba(217,88,43,0)}}
@keyframes sc-row1{0%,3%{opacity:0;transform:translateY(12px)}6%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-wait1{0%,5%{opacity:0}6%,9%{opacity:1}10%,100%{opacity:0}}
@keyframes sc-tag1{0%,9.5%{opacity:0;transform:scale(1.5) rotate(-6deg)}11%{opacity:1;transform:scale(.94) rotate(-2deg)}12%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-row2{0%,13%{opacity:0;transform:translateY(12px)}16%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-wait2{0%,15%{opacity:0}16%,19%{opacity:1}20%,100%{opacity:0}}
@keyframes sc-tag2{0%,19.5%{opacity:0;transform:scale(1.5) rotate(-6deg)}21%{opacity:1;transform:scale(.94) rotate(-2deg)}22%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-row3{0%,23%{opacity:0;transform:translateY(12px)}26%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-wait3{0%,25%{opacity:0}26%,29%{opacity:1}30%,100%{opacity:0}}
@keyframes sc-tag3{0%,29.5%{opacity:0;transform:scale(1.5) rotate(-6deg)}31%{opacity:1;transform:scale(.94) rotate(-2deg)}32%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-row4{0%,33%{opacity:0;transform:translateY(12px)}36%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-wait4{0%,35%{opacity:0}36%,39%{opacity:1}40%,100%{opacity:0}}
@keyframes sc-tag4{0%,39.5%{opacity:0;transform:scale(1.5) rotate(-6deg)}41%{opacity:1;transform:scale(.94) rotate(-2deg)}42%,90%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes sc-day1{0%,50%{opacity:0;transform:translateY(10px)}53%,100%{opacity:1;transform:none}}
@keyframes sc-day2{0%,53%{opacity:0;transform:translateY(10px)}56%,100%{opacity:1;transform:none}}
@keyframes sc-day3{0%,56%{opacity:0;transform:translateY(10px)}59%,100%{opacity:1;transform:none}}
@keyframes sc-day4{0%,59%{opacity:0;transform:translateY(10px)}62%,100%{opacity:1;transform:none}}
@keyframes sc-day5{0%,62%{opacity:0;transform:translateY(10px)}65%,100%{opacity:1;transform:none}}
@keyframes sc-day6{0%,65%{opacity:0;transform:translateY(10px)}68%,100%{opacity:1;transform:none}}
@keyframes sc-day7{0%,68%{opacity:0;transform:translateY(10px)}71%,100%{opacity:1;transform:none}}