/* ============================================================
   Senior&Co — Rafraîchissement visuel (fichier de surcharge)
   À charger APRÈS style.css. Aucun HTML à modifier.
   Toutes les règles sont préfixées "body" pour passer devant
   les <style> inline des pages.
   ============================================================ */

:root {
  --sc-navy:#1B2559;  --sc-navy2:#2C3A86;
  --sc-yellow:#FFC83D; --sc-yellow-l:#FFF1C7;
  --sc-coral:#FF6B5E;  --sc-coral-l:#FFE7E3;
  --sc-mint:#14A47F;   --sc-mint-l:#D9F5EA;
  --sc-sky:#3D7BFF;    --sc-sky-l:#E3ECFF;
  --sc-violet:#7B5CF0; --sc-violet-l:#ECE7FF;
  --sc-ink:#1A1F3A;    --sc-soft:#566080;
  --sc-r:26px;
  --sc-sh:0 1px 2px rgba(27,37,89,.05), 0 10px 26px -8px rgba(27,37,89,.14);
  --sc-sh-h:0 2px 4px rgba(27,37,89,.06), 0 20px 38px -10px rgba(27,37,89,.24);
}

/* ── FOND : clair, moderne (mesh gradient + trame de points + blobs doux) ── */
body {
  background: #FBFAF6 !important;
  color: var(--sc-ink);
  position: relative;
}
/* couche 1 : dégradé "mesh" pastel */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 520px at 100% -5%,  rgba(255,200,61,.40), transparent 65%),
    radial-gradient(800px 560px at -5% 12%,   rgba(61,123,255,.20), transparent 65%),
    radial-gradient(760px 520px at 105% 62%,  rgba(255,107,94,.16), transparent 65%),
    radial-gradient(820px 560px at 0% 100%,   rgba(20,164,127,.18), transparent 65%),
    linear-gradient(180deg, #FFFDF8 0%, #F6F8FF 100%);
}
/* couche 2 : fine trame de points qui s'estompe vers le bas */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(27,37,89,.13) 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
/* couche 3 : deux grosses bulles floues qui flottent lentement */
html::before, html::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .45;
}
html::before { top: 8%;  left: -140px;  background: #BBD0FF; animation: sc-float 22s ease-in-out infinite alternate; }
html::after  { bottom: 4%; right: -140px; background: #FFE08A; animation: sc-float 26s ease-in-out infinite alternate-reverse; }
@keyframes sc-float { to { transform: translate(70px, -50px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { html::before, html::after { animation: none; } }
@media (max-width: 600px) { html::before, html::after { width: 260px; height: 260px; } }

body .dash-wrap { max-width: 980px; padding: 28px 20px; }

/* ── CARTE DATE / MÉTÉO : bandeau marine ── */
body .dash-wrap > div:has(#dateAujourdhui) {
  background: linear-gradient(120deg, var(--sc-navy) 0%, var(--sc-navy2) 100%) !important;
  border: 0 !important;
  border-radius: var(--sc-r) !important;
  padding: 26px 30px !important;
  box-shadow: var(--sc-sh-h) !important;
  position: relative; overflow: hidden;
}
body .dash-wrap > div:has(#dateAujourdhui)::after {
  content: ""; position: absolute; right: -50px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,61,.45), rgba(255,200,61,0) 70%);
  pointer-events: none;
}
body .dash-wrap > div:has(#dateAujourdhui) * { color: #fff !important; }
body #dateAujourdhui { font-family: 'Fraunces', Georgia, serif; font-size: 38px !important; font-weight: 700; letter-spacing: -.01em; }
body #dateComplete { font-size: 18px !important; opacity: .85; }

/* ── SOPHIE : pleine largeur, bouton voix bien visible ── */
body .ai-bubble {
  display: flex !important; max-width: none !important; width: 100%;
  background: linear-gradient(120deg, #DDF6EC 0%, #E6EEFF 100%) !important;
  border: 0 !important; border-radius: var(--sc-r) !important;
  padding: 22px 28px !important; gap: 20px !important;
  box-shadow: var(--sc-sh) !important;
}
body .ai-bubble #aiMsg { font-size: 21px !important; font-weight: 500; color: var(--sc-ink) !important; line-height: 1.4; }
body .ai-bubble button {
  width: 68px; height: 68px; border-radius: 50% !important; padding: 0 !important;
  background: var(--sc-yellow) !important; color: var(--sc-navy) !important;
  font-size: 26px !important; border: 0 !important;
  box-shadow: 0 8px 18px -4px rgba(255,200,61,.8) !important;
  transition: transform .15s;
}
body .ai-bubble button:hover { transform: scale(1.08); }

/* ── CHIFFRES CLÉS : 3 tuiles colorées ── */
body .stats { gap: 18px; margin-bottom: 26px; }
body .stat {
  border: 0; border-radius: var(--sc-r); padding: 26px 12px 20px;
  box-shadow: var(--sc-sh); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
body .stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; }
body .stat:hover { transform: translateY(-3px); box-shadow: var(--sc-sh-h); }
body .stat-v { font-family: 'Fraunces', Georgia, serif; font-size: 48px; font-weight: 700; line-height: 1; }
body .stat-l { font-size: 17px; font-weight: 600; color: var(--sc-soft); margin-top: 10px; }
body .stat:nth-child(1) { background: linear-gradient(170deg, var(--sc-sky-l), #fff 75%); }
body .stat:nth-child(1)::before { background: var(--sc-sky); }
body .stat:nth-child(1) .stat-v { color: var(--sc-sky); }
body .stat:nth-child(2) { background: linear-gradient(170deg, var(--sc-coral-l), #fff 75%); }
body .stat:nth-child(2)::before { background: var(--sc-coral); }
body .stat:nth-child(2) .stat-v { color: var(--sc-coral); }
body .stat:nth-child(3) { background: linear-gradient(170deg, var(--sc-yellow-l), #fff 75%); }
body .stat:nth-child(3)::before { background: var(--sc-yellow); }
body .stat:nth-child(3) .stat-v { color: #C98A00; }

/* ── CARTES (widgets) ── */
body .wcard {
  border: 0; border-radius: var(--sc-r); padding: 26px;
  box-shadow: var(--sc-sh); background: #fff;
  transition: transform .2s, box-shadow .2s;
}
body .wcard:hover { box-shadow: var(--sc-sh-h); }
body .wcard-head { gap: 14px; margin-bottom: 20px; }
body .wcard-head > span:first-child {
  width: 52px; height: 52px; border-radius: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--sc-yellow-l); font-size: 28px !important;
}
body .wcard-title { font-family: 'Fraunces', Georgia, serif; font-size: 24px; font-weight: 700; color: var(--sc-navy); }
body .wcard-link {
  font-size: 16px; font-weight: 700; color: var(--sc-navy);
  background: #EEF1FF; padding: 9px 16px; border-radius: 999px;
  text-decoration: none; transition: .15s; white-space: nowrap;
}
body .wcard-link:hover { background: var(--sc-yellow); text-decoration: none; }
body .wgrid { gap: 20px; }
body .wgrid .wcard:nth-child(1) .wcard-head > span:first-child { background: var(--sc-violet-l); }
body .wgrid .wcard:nth-child(2) .wcard-head > span:first-child { background: var(--sc-coral-l); }
body .wgrid .wcard:nth-child(3) .wcard-head > span:first-child { background: var(--sc-sky-l); }
body .wgrid .wcard:nth-child(4) .wcard-head > span:first-child { background: var(--sc-yellow-l); }

/* lignes de liste : texte lisible (≥ 17 px) */
body .list-row { padding: 14px 0; gap: 14px; border-bottom: 1px solid #EEF0F8; }
body .list-row [style*="font-size:14px"], body .list-row [style*="font-size: 14px"] { font-size: 18px !important; color: var(--sc-ink); }
body .list-row [style*="font-size:12px"], body .list-row [style*="font-size: 12px"] { font-size: 15px !important; color: var(--sc-soft) !important; }
body .list-row > div:first-child { width: 48px !important; height: 48px !important; border-radius: 16px !important; font-size: 24px !important; background: var(--sc-violet-l) !important; }
body .wcard [style*="text-align:center"][style*="padding:14px"] { font-size: 17px !important; color: var(--sc-soft) !important; }

/* ── JEUX RAPIDES : pastilles colorées ── */
body .jeux { gap: 14px; }
body .jeu-chip {
  min-height: 58px; padding: 14px 22px; border-radius: 20px;
  font-size: 18px; font-weight: 700; color: var(--sc-ink);
  border: 0 !important; box-shadow: 0 1px 2px rgba(27,37,89,.06), 0 6px 14px -6px rgba(27,37,89,.2);
  transition: transform .15s, box-shadow .15s;
}
body .jeu-chip:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--sc-sh-h); color: var(--sc-ink); }
body .jeu-chip:nth-child(1) { background: var(--sc-violet-l) !important; }
body .jeu-chip:nth-child(2) { background: var(--sc-sky-l) !important; }
body .jeu-chip:nth-child(3) { background: var(--sc-coral-l) !important; }
body .jeu-chip:nth-child(4) { background: var(--sc-yellow-l) !important; }
body .jeu-chip:nth-child(5) { background: #E6F7EE !important; }
body .jeu-chip:nth-child(6) { background: var(--sc-mint-l) !important; }

/* ── ACCÈS RAPIDES ── */
body .wcard a[style*="border-radius:12px"] {
  background: #F3F5FF !important; border-radius: 18px !important;
  padding: 15px 18px !important; font-size: 18px !important; gap: 14px !important;
  transition: transform .15s, background .15s;
}
body .wcard a[style*="border-radius:12px"]:hover { background: var(--sc-yellow-l) !important; transform: translateX(4px); }

/* ── APPARITION DOUCE ── */
@keyframes sc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body .dash-wrap > *, body .wgrid > * { animation: sc-in .5s cubic-bezier(.2,.7,.2,1) both; }
body .wgrid > *:nth-child(2) { animation-delay: .06s; }
body .wgrid > *:nth-child(3) { animation-delay: .12s; }
body .wgrid > *:nth-child(4) { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  body .dash-wrap > *, body .wgrid > * { animation: none; }
  body .stat, body .wcard, body .jeu-chip { transition: none; }
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  body .wgrid { grid-template-columns: 1fr; }
  body #dateAujourdhui { font-size: 30px !important; }
  body .stat-v { font-size: 38px; }
  body .ai-bubble { padding: 18px !important; }
}
@media (max-width: 480px) {
  body .stats { gap: 10px; }
  body .stat { padding: 20px 6px 16px; }
  body .stat-v { font-size: 32px; }
  body .stat-l { font-size: 14px; }
  body .wcard { padding: 20px; }
  body .wcard-title { font-size: 20px; }
  body .stat-l { white-space: nowrap; font-size: 13px; }
}