/* Police de marque, auto-hébergée (SIL OFL) — chemin relatif au fichier CSS */
@font-face { font-family: Montserrat; font-weight: 100 900; font-style: normal; font-display: swap; /* impeccable-disable-line overused-font: police de marque, choix de Raph */
  src: url(fonts/montserrat-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-weight: 100 900; font-style: normal; font-display: swap; /* impeccable-disable-line overused-font: police de marque, choix de Raph */
  src: url(fonts/montserrat-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Raphiverse design tokens — source de vérité. Dérivés de la marque Authentik
   (orange #f47b45, rose #d946c7, encre #171522). Ne pas coder de couleur en dur
   dans les apps : utiliser les jetons sémantiques (--rv-*). */
:root {
  /* Primitifs */
  --rv-orange-500: #f47b45; --rv-orange-600: #d85b2d; --rv-orange-100: #fde8dc;
  --rv-pink-500: #d946c7;   --rv-pink-700: #b52aa5;   --rv-pink-100: #f9e4f6;
  --rv-ink-950: #0e0c16;    --rv-ink-900: #171522;    --rv-ink-800: #201a28;
  --rv-ink-700: #2b2638;    --rv-ink-500: #625d69;    --rv-ink-300: #9a96a4;
  --rv-paper-0: #ffffff;    --rv-paper-50: #faf8f6;   --rv-paper-100: #f3f0ec;  --rv-paper-200: #e4dfd9;
  --rv-green-500: #2fb574;  --rv-amber-500: #e0a32a;  --rv-red-500: #e5484d;  --rv-blue-500: #3b82f6;

  /* Typographie */
  --rv-font-sans: Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rv-text-xs: .75rem; --rv-text-sm: .875rem; --rv-text-md: 1rem;
  --rv-text-lg: 1.25rem; --rv-text-xl: 1.75rem; --rv-text-2xl: 2.5rem;

  /* Espacement, rayons, ombres, mouvement */
  --rv-space-1: .25rem; --rv-space-2: .5rem; --rv-space-3: .75rem; --rv-space-4: 1rem;
  --rv-space-5: 1.5rem; --rv-space-6: 2rem; --rv-space-7: 3rem;
  --rv-radius-sm: 9px; --rv-radius-md: 14px; --rv-radius-lg: 22px; --rv-radius-pill: 999px;
  --rv-shadow-md: 0 8px 24px rgba(10,5,20,.18);
  --rv-shadow-lg: 0 18px 60px rgba(10,5,20,.38);
  --rv-shadow-brand: 0 6px 16px rgba(10,5,20,.28); /* neutre: pas de halo coloré */
  --rv-ease: cubic-bezier(.2,.7,.2,1); --rv-dur: .16s;
  --rv-gradient-brand: linear-gradient(100deg, var(--rv-orange-500), var(--rv-pink-500));
  --rv-focus-ring: 0 0 0 3px color-mix(in srgb, var(--rv-orange-500) 35%, transparent);
}

/* Thème sombre (défaut) */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --rv-bg: var(--rv-ink-950);
  --rv-bg-raised: var(--rv-ink-900);
  --rv-surface: var(--rv-ink-800);
  --rv-surface-hover: var(--rv-ink-700);
  --rv-border: rgba(255,255,255,.12);
  --rv-mark-planet: #3a3448;
  --rv-text: #f6f4f8;
  --rv-text-muted: #b9b4c4;
  --rv-text-faint: #8a8596;
  --rv-link: #ff9a6e;
  --rv-accent: var(--rv-orange-500);
  --rv-on-accent: var(--rv-ink-950);
  --rv-ok: var(--rv-green-500); --rv-warn: var(--rv-amber-500);
  --rv-danger-solid: #c62f36; --rv-on-danger: #ffffff; /* 5.4:1 */
  --rv-danger: #ff6b70;        --rv-info: #6ea8ff;
}
/* Thème clair */
[data-theme="light"] {
  color-scheme: light;
  --rv-bg: var(--rv-paper-50);
  --rv-bg-raised: var(--rv-paper-0);
  --rv-surface: var(--rv-paper-0);
  --rv-surface-hover: var(--rv-paper-100);
  --rv-border: var(--rv-paper-200);
  --rv-mark-planet: var(--rv-ink-900);
  --rv-text: var(--rv-ink-900);
  --rv-text-muted: var(--rv-ink-500);
  --rv-text-faint: #6b6675;
  --rv-link: var(--rv-pink-700);
  --rv-on-accent: var(--rv-ink-950);
  --rv-ok: #16794a; --rv-warn: #8a5a00; --rv-danger: #d0343a; --rv-info: #2563eb;
}
/* Auto: suit le système quand l'app ne fixe pas data-theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --rv-bg: var(--rv-paper-50); --rv-bg-raised: var(--rv-paper-0); --rv-surface: var(--rv-paper-0);
    --rv-surface-hover: var(--rv-paper-100); --rv-border: var(--rv-paper-200);
    --rv-mark-planet: var(--rv-ink-900); --rv-text: var(--rv-ink-900); --rv-text-muted: var(--rv-ink-500); --rv-text-faint: #6b6675;
    --rv-link: var(--rv-pink-700);
    --rv-ok: #16794a; --rv-warn: #8a5a00; --rv-danger: #d0343a; --rv-info: #2563eb;
  }
}
/* Composants Raphiverse — préfixe .rv-, uniquement des jetons de tokens.css. */
.rv-body { margin: 0; background: var(--rv-bg); color: var(--rv-text); font: 400 var(--rv-text-md)/1.55 var(--rv-font-sans); }
.rv-body *, .rv-body *::before, .rv-body *::after { box-sizing: border-box; }
:where(.rv-body) a { color: var(--rv-link); } /* spécificité 0: .rv-btn, .rv-brand… gardent leur couleur */
.rv-h1 { font-size: var(--rv-text-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 var(--rv-space-4); }
.rv-h2 { font-size: var(--rv-text-xl); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--rv-space-3); }
.rv-muted { color: var(--rv-text-muted); } .rv-mono { font-family: var(--rv-font-mono); }
.rv-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }

.rv-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--rv-space-4);
  padding: var(--rv-space-3) var(--rv-space-5); background: var(--rv-bg-raised); border-bottom: 1px solid var(--rv-border); }
.rv-brand { display: inline-flex; align-items: center; gap: var(--rv-space-3); font-weight: 800; letter-spacing: -.02em; color: var(--rv-text); text-decoration: none; }
.rv-brand img { height: 32px; width: auto; border-radius: 8px; } /* logo source opaque (fond blanc) */

.rv-card { background: var(--rv-surface); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-lg); padding: var(--rv-space-5); box-shadow: var(--rv-shadow-md); }
.rv-card--interactive { transition: transform var(--rv-dur) var(--rv-ease), background var(--rv-dur); }
.rv-card--interactive:hover { background: var(--rv-surface-hover); transform: translateY(-2px); }

.rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--rv-space-2); min-height: 2.5rem;
  padding: 0 var(--rv-space-4); border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); background: var(--rv-surface);
  color: var(--rv-text); font: 700 var(--rv-text-sm) var(--rv-font-sans); cursor: pointer; text-decoration: none;
  transition: transform var(--rv-dur) var(--rv-ease), filter var(--rv-dur), background var(--rv-dur); }
.rv-btn:hover { background: var(--rv-surface-hover); }
.rv-btn:focus-visible, .rv-input:focus-visible { outline: 0; box-shadow: var(--rv-focus-ring); }
.rv-btn:disabled { opacity: .5; cursor: not-allowed; }
.rv-btn--primary { background: var(--rv-gradient-brand); color: var(--rv-on-accent); border: 0; box-shadow: var(--rv-shadow-brand); }
.rv-btn--primary:hover { background: var(--rv-gradient-brand); filter: brightness(1.06); transform: translateY(-1px); }
.rv-btn--danger { color: var(--rv-danger); }

.rv-field { display: grid; gap: var(--rv-space-2); font-size: var(--rv-text-sm); font-weight: 600; }
.rv-input { min-height: 2.75rem; padding: 0 var(--rv-space-3); background: var(--rv-bg-raised); color: var(--rv-text);
  border: 1px solid var(--rv-border); border-radius: var(--rv-radius-sm); font: 400 var(--rv-text-md) var(--rv-font-sans); }
.rv-input:hover { border-color: var(--rv-orange-500); } .rv-input:focus { border-color: var(--rv-orange-500); }

.rv-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: var(--rv-radius-pill);
  font-size: var(--rv-text-xs); font-weight: 700; border: 1px solid currentColor; color: var(--rv-text-muted); }
.rv-badge--ok { color: var(--rv-ok); } .rv-badge--warn { color: var(--rv-warn); }
.rv-badge--danger { color: var(--rv-danger); } .rv-badge--info { color: var(--rv-info); }
.rv-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }

.rv-alert { --rv-status: var(--rv-info); padding: var(--rv-space-3) var(--rv-space-4); border-radius: var(--rv-radius-md);
  border: 1px solid var(--rv-status); color: var(--rv-text);
  background: color-mix(in srgb, var(--rv-status) 12%, var(--rv-surface)); }
.rv-alert--ok { --rv-status: var(--rv-ok); } .rv-alert--warn { --rv-status: var(--rv-warn); }
.rv-alert--danger { --rv-status: var(--rv-danger); } .rv-alert--info { --rv-status: var(--rv-info); }

.rv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rv-border); }
.rv-list > li { display: flex; align-items: center; gap: var(--rv-space-3); padding: var(--rv-space-3) var(--rv-space-2); border-bottom: 1px solid var(--rv-border); }

.rv-spinner { width: 1.4rem; height: 1.4rem; border: 2px solid var(--rv-border); border-top-color: var(--rv-orange-500); border-radius: 50%; animation: rv-spin .8s linear infinite; }

/* États: chargement, vide, confirmation, toast */
.rv-skeleton { display: block; min-height: 1em; border-radius: var(--rv-radius-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--rv-text) 7%, transparent) 25%, color-mix(in srgb, var(--rv-text) 14%, transparent) 50%, color-mix(in srgb, var(--rv-text) 7%, transparent) 75%);
  background-size: 200% 100%; animation: rv-shimmer 1.3s linear infinite; }
@keyframes rv-shimmer { to { background-position: -200% 0; } }
.rv-empty { display: grid; justify-items: center; gap: var(--rv-space-3); padding: var(--rv-space-6) var(--rv-space-4);
  text-align: center; color: var(--rv-text-muted); border: 1px dashed var(--rv-border); border-radius: var(--rv-radius-lg); }
.rv-empty strong { color: var(--rv-text); }
.rv-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--rv-space-4); background: rgba(10,5,20,.6); }
.rv-dialog { width: min(100%, 28rem); display: grid; gap: var(--rv-space-3); padding: var(--rv-space-5);
  background: var(--rv-bg-raised); color: var(--rv-text); border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-lg); box-shadow: var(--rv-shadow-lg); }
.rv-dialog__actions { display: flex; justify-content: flex-end; gap: var(--rv-space-2); }
.rv-btn--danger-solid, .rv-btn--danger-solid:hover { background: var(--rv-danger-solid); color: var(--rv-on-danger); border: 0; }
.rv-btn--danger-solid:hover { filter: brightness(1.12); }
.rv-toast { display: inline-flex; align-items: center; gap: var(--rv-space-4); padding: var(--rv-space-3) var(--rv-space-4);
  background: var(--rv-bg-raised); color: var(--rv-text); border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-md); box-shadow: var(--rv-shadow-lg); }

/* Identité: orbite et ciel étoilé (statique, neutre) */
.rv-orbit { position: relative; width: 1.6rem; height: 1.6rem; border: 2px solid var(--rv-border); border-radius: 50%; }
.rv-orbit::after { content: ""; position: absolute; top: -.32rem; left: calc(50% - .3rem); width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--rv-orange-500); transform-origin: .3rem 1rem; animation: rv-spin 1.4s linear infinite; }
.rv-stars { background-image: radial-gradient(circle, color-mix(in srgb, var(--rv-text) 22%, transparent) 1px, transparent 1.5px),
  radial-gradient(circle, color-mix(in srgb, var(--rv-orange-500) 35%, transparent) 1px, transparent 1.5px);
  background-size: 47px 47px, 83px 83px; background-position: 0 0, 21px 33px; }
.rv-mark { display: inline-block; height: 2rem; width: auto; aspect-ratio: 415 / 380; flex: none; }
.rv-mark .mk-planet { fill: var(--rv-mark-planet); }
.rv-mark .mk-fill { fill: var(--rv-orange-500); }
.rv-mark .mk-line { fill: none; stroke: var(--rv-orange-500); stroke-width: 9; stroke-linecap: round; }
.rv-mark .mk-dot { fill: var(--rv-paper-0); }
/* Entrée douce: .rv-rise (délai échelonné via --i). Désactivée si l'on préfère moins de mouvement. */
.rv-rise { animation: rv-rise .7s var(--rv-ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes rv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv-rise { animation: none; } }
@keyframes rv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rv-body * { animation-duration: .001ms !important; transition: none !important; } }
/* Marque Raphiverse — animation d'entrée (une fois) puis flottement lent. Désactivée si l'on préfère moins de mouvement. */
.mk-planet, .mk-craters > *, .mk-slice, .mk-slice-in, .mk-pep > * { transform-box: fill-box; transform-origin: center; }
.mk-planet { animation: mk-pop .8s cubic-bezier(.2,.7,.2,1) both; }
.mk-craters > * { animation: mk-pop .5s cubic-bezier(.16,1,.3,1) both; }
.mk-craters > :nth-child(1) { animation-delay: .35s; } .mk-craters > :nth-child(2) { animation-delay: .43s; }
.mk-craters > :nth-child(3) { animation-delay: .51s; } .mk-craters > :nth-child(4) { animation-delay: .59s; } .mk-craters > :nth-child(5) { animation-delay: .67s; }
.mk-ring { animation: mk-sweep .95s .45s cubic-bezier(.2,.7,.2,1) both; }
.mk-slice-in { animation: mk-bite .85s .95s cubic-bezier(.16,1,.3,1) both; }
.mk-slice { animation: mk-float 3.6s 2s ease-in-out infinite alternate; }
.mk-pep > * { animation: mk-pop .45s cubic-bezier(.16,1,.3,1) both; }
.mk-pep > :nth-child(1) { animation-delay: 1.5s; } .mk-pep > :nth-child(2) { animation-delay: 1.6s; } .mk-pep > :nth-child(3) { animation-delay: 1.7s; }
.rv-brand:hover .mk-slice, .mk-hover:hover .mk-slice { animation: mk-wiggle .7s ease-in-out; }
@keyframes mk-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes mk-sweep { from { clip-path: inset(0 100% 0 0); opacity: .2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes mk-bite { from { opacity: 0; transform: translate(70px, -70px) rotate(22deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mk-float { from { transform: translate(0, 0) rotate(0); } to { transform: translate(3px, -4px) rotate(2.5deg); } }
@keyframes mk-wiggle { 20% { transform: translate(-3px, 3px) rotate(-6deg); } 50% { transform: translate(5px, -6px) rotate(7deg); } 80% { transform: translate(-1px, 1px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .mk-planet, .mk-craters > *, .mk-ring, .mk-slice, .mk-slice-in, .mk-pep > * { animation: none !important; } }