/* ===== Centres d'intérêt (interests-view.css) — style de interests-view.js =====
   Partagé : en-tête, illustrations SVG et leurs animations (jouées une fois, jamais en boucle permanente).
   .inv--win   : « Widgets » de Windows 11 — grille bento, verre clair bleu / rose (thème sombre automatique), tuiles retournables.
   .inv--linux : panneau GNOME — carrousel Adwaita + lignes AdwActionRow, aubergine / orange #E95420, thèmes clair et sombre de Linux.
   Animations : transform + opacity seulement ; coupées avec prefers-reduced-motion et l'interrupteur « Animations » de Linux. */

.inv {
  --iv-bg: #f3f8ff; --iv-fg: #14253a; --iv-muted: #5d7288; --iv-line: #d5e3f1; --iv-card: #ffffffe6; --iv-a: #e91e63; --iv-b: #2871b6;
  --iv-hero: linear-gradient(125deg, #ffffffe6, #ffeaf1d9 55%, #e6f0ffd9);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 24px 28px; color: var(--iv-fg); background: var(--iv-bg);
  font: 14px/1.5 'DM Sans', system-ui, sans-serif; min-width: 0;
}
.inv *, .inv *::before, .inv *::after { box-sizing: border-box; }
/* thème sombre (ex-@media prefers-color-scheme) */

  :where(:root[data-theme="dark"]) .inv--win { --iv-bg: #131f36; --iv-fg: #e8f0fb; --iv-muted: #9fb3cb; --iv-line: #2b3d5d; --iv-card: #1c2b48e6; --iv-a: #ff7aa6; --iv-b: #6aa9ee;
    --iv-hero: linear-gradient(125deg, #1f3358e6, #3a2342d9 60%, #1b2a4ed9); }

.inv--linux {
  --iv-bg: var(--win-bg); --iv-fg: var(--win-fg); --iv-muted: var(--win-muted); --iv-line: var(--win-line); --iv-card: var(--win-card);
  --iv-a: var(--accent, #e95420); --iv-b: #8a5cf5; font-family: var(--font, 'Ubuntu', system-ui, sans-serif);
  --iv-hero: linear-gradient(125deg, color-mix(in srgb, var(--accent, #e95420) 13%, var(--win-soft)), var(--win-soft) 60%, color-mix(in srgb, #8a5cf5 15%, var(--win-soft)));
}

/* ---------- En-tête ---------- */
.inv-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; border: 1px solid var(--iv-line); border-radius: 20px; background: var(--iv-hero); box-shadow: 0 14px 34px #0a1f3a14; }
.inv-hero.in { animation: ivRise .55s cubic-bezier(.2, .8, .2, 1) both; }
.inv-hero::before { content: ''; position: absolute; right: -60px; top: -100px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--iv-a) 30%, transparent), transparent 68%); pointer-events: none; }
.inv-hero > * { position: relative; }
.inv-kicker { margin: 0 0 4px; color: var(--iv-a); font: 700 11px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; }
.inv .inv-hero h2 { margin: 0; color: var(--iv-fg); text-transform: none; letter-spacing: -.03em; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.05; }
.inv-intro { margin: 10px 0 0; max-width: 52ch; color: var(--iv-muted); }
.inv-count { flex: none; display: grid; justify-items: center; align-content: center; width: 100px; height: 100px; border-radius: 50%; background: var(--iv-card); border: 1px solid color-mix(in srgb, var(--iv-a) 35%, var(--iv-line)); box-shadow: 0 10px 26px color-mix(in srgb, var(--iv-a) 18%, transparent); transform: rotate(6deg); }
.inv-count b { color: var(--iv-a); font: 700 30px/1 'IBM Plex Mono', ui-monospace, monospace; }
.inv-count small { margin-top: 4px; max-width: 8ch; text-align: center; color: var(--iv-muted); font-size: 11px; line-height: 1.2; }
html.lang-rtl .inv-count { transform: rotate(-6deg); }
.inv-num { margin: 0; color: var(--c1); font: 700 12px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; }
.inv h3 { letter-spacing: 0; text-transform: none; color: var(--iv-fg); font-weight: 700; }

/* ---------- Illustrations (communes) ---------- */
.inv-art { position: relative; display: grid; place-items: center; min-height: 0; }
.inv-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 12px #0a1f3a22); }
.inv-emoji { font-size: 78px; line-height: 1; }
.inv-words { position: absolute; inset: 0; pointer-events: none; }
.inv-word { position: absolute; opacity: 0; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--c1) 88%, #000 8%); color: #fff; font: 700 12px 'DM Sans', system-ui, sans-serif; box-shadow: 0 6px 14px #0003; white-space: nowrap; unicode-bidi: isolate; }
.inv-word.w0 { left: 8%; top: 14%; --k: 0; } .inv-word.w1 { right: 8%; top: 8%; --k: 1; } .inv-word.w2 { left: 6%; bottom: 14%; --k: 2; } .inv-word.w3 { right: 8%; bottom: 18%; --k: 3; }

.ia-globe, .ia-land, .ia-shadow, .ia-ball, .ia-bell { transform-box: fill-box; }
.ia-shadow { transform-origin: 50% 50%; opacity: .22; }
.ia-ball { transform-origin: 50% 100%; }
.inv-volley .ia-ball { transform-origin: 50% 50%; }
.play.inv-football .ia-ball { animation: iaBounce 2.6s both; }
.play.inv-football .ia-shadow { animation: iaBounceShadow 2.6s both; }
.play.inv-volley .ia-ball { animation: iaSpinHop 2.2s ease-in-out both; }
.play.inv-volley .ia-shadow { animation: iaHopShadow 2.2s ease-in-out both; }
.play.inv-musculation .ia-bell { animation: iaLift 2.8s ease-in-out both; }
.play.inv-musculation .ia-shadow { animation: iaLiftShadow 2.8s ease-in-out both; }
.play.inv-langues .ia-land { animation: iaLand 3.4s linear both; }
.play.inv-langues .ia-globe { animation: iaGlobe 3.4s ease-in-out both; }
.play .inv-word { animation: iaWord 2.6s ease both; animation-delay: calc(var(--k, 0) * .5s); }

@keyframes iaBounce {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  20% { transform: translateY(-54px); animation-timing-function: cubic-bezier(.6, 0, .9, .55); }
  40% { transform: translateY(0) scale(1, 1); }
  44% { transform: translateY(0) scale(1.12, .86); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  48% { transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  66% { transform: translateY(-30px); animation-timing-function: cubic-bezier(.6, 0, .9, .55); }
  82% { transform: translateY(0) scale(1, 1); }
  85% { transform: translateY(0) scale(1.07, .93); }
  88% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .7, .35, 1); }
  94% { transform: translateY(-10px); animation-timing-function: cubic-bezier(.6, 0, .9, .55); }
  100% { transform: translateY(0); }
}
@keyframes iaBounceShadow { 0%, 40%, 48%, 82%, 88%, 100% { transform: scale(1); opacity: .22; } 20% { transform: scale(.62); opacity: .1; } 66% { transform: scale(.8); opacity: .15; } 94% { transform: scale(.92); opacity: .19; } }
@keyframes iaSpinHop { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-34px) rotate(360deg); } 100% { transform: translateY(0) rotate(720deg); } }
@keyframes iaHopShadow { 50% { transform: scale(.65); opacity: .1; } }
@keyframes iaLift { 0%, 100% { transform: translateY(0); } 16% { transform: translateY(-30px); } 33% { transform: translateY(0); } 49% { transform: translateY(-30px); } 66% { transform: translateY(0); } 82% { transform: translateY(-30px); } }
@keyframes iaLiftShadow { 16%, 49%, 82% { transform: scaleX(.78); opacity: .12; } 33%, 66%, 100% { transform: scaleX(1); opacity: .22; } }
@keyframes iaLand { from { transform: translateX(0); } to { transform: translateX(-150px); } }
@keyframes iaGlobe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes iaWord { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 18%, 62% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.95); } }
@keyframes ivRise { from { opacity: 0; transform: translateY(14px); } }

/* ================= WINDOWS : Widgets (bento) ================= */
.wi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 14px; perspective: 1100px; }
.wi-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.wi-tile:nth-child(2) { grid-column: span 2; }
.wi-tile {
  --ty: 20px; position: relative; border-radius: 22px; outline: none; cursor: pointer; opacity: 0; user-select: none; -webkit-tap-highlight-color: transparent;
  transform: translateY(var(--ty)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms);
}
.wi-tile.in { --ty: 0px; opacity: 1; }
.wi-tile.tilting { transition: transform .12s linear; transition-delay: 0s; }
.wi-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
.wi-tile.flipped .wi-inner { transform: rotateY(180deg); }
.wi-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--iv-line); background: var(--iv-card);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 10px 26px #0a1f3a14; transition: box-shadow .3s, border-color .3s;
}
.wi-tile:hover .wi-face, .wi-tile:focus-visible .wi-face { border-color: color-mix(in srgb, var(--c1) 70%, var(--iv-line)); box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--c1) 55%, transparent); }
.wi-tile:focus-visible { outline: 2px solid var(--c1); outline-offset: 3px; }
.wi-front { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 10px 0 0; }
.wi-back { transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 22px; }
.wi-halo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%), radial-gradient(60% 50% at 100% 100%, color-mix(in srgb, var(--c2) 20%, transparent), transparent 70%); }
.wi-front .inv-art, .wi-cap, .wi-back > :not(.wi-halo) { position: relative; z-index: 1; }
.wi-front .inv-art { padding: 4px 16px 0; }
.wi-cap { display: flex; align-items: baseline; gap: 10px; padding: 0 18px 14px; }
.wi-cap h3, .wi-back h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.wi-tile:nth-child(n+2) .wi-cap { padding-bottom: 12px; }
.wi-tile:nth-child(n+3) .wi-cap h3 { font-size: 15px; }
.wi-tile:nth-child(n+2) .wi-text { font-size: 14px; }
.wi-flip { margin-inline-start: auto; color: var(--iv-muted); font-size: 16px; transition: transform .4s; }
.wi-tile:hover .wi-flip { transform: rotate(180deg); }
.wi-text { margin: 4px 0 0; color: var(--iv-muted); font-size: 15px; line-height: 1.55; }
.wi-back .wi-flip { position: absolute; inset-inline-end: 16px; bottom: 12px; margin: 0; }
.wi-tile:nth-child(1) .wi-text { font-size: 17px; }

/* ================= LINUX : carrousel Adwaita + lignes ================= */
.lc-frame { position: relative; overflow: hidden; border: 1px solid var(--iv-line); border-radius: 22px; background: var(--iv-card); }
.lc-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; -webkit-overflow-scrolling: touch; }
.lc-track::-webkit-scrollbar { display: none; }
.lc-track:focus-visible { outline: 2px solid var(--iv-a); outline-offset: -3px; border-radius: 22px; }
.lc-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 56px 16px;
  background: radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--c1) 26%, transparent), transparent 72%), radial-gradient(50% 60% at 100% 100%, color-mix(in srgb, var(--c2) 16%, transparent), transparent 70%); }
.lc-slide .inv-art { width: min(260px, 100%); height: 200px; }
.lc-cap { display: flex; align-items: baseline; gap: 10px; }
.lc-cap h3 { margin: 0; font-size: 20px; }
.lc-nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; border: 1px solid var(--iv-line); border-radius: 50%; background: var(--iv-card); color: var(--iv-fg); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px #0003; transition: transform .15s, background .15s, opacity .2s; }
.lc-nav:hover:not(:disabled) { transform: scale(1.1); background: color-mix(in srgb, var(--iv-a) 14%, var(--iv-card)); }
.lc-nav:disabled { opacity: .35; cursor: default; }
.lc-nav:focus-visible { outline: 2px solid var(--iv-a); outline-offset: 2px; }
.lc-prev { inset-inline-start: 12px; } .lc-next { inset-inline-end: 12px; }
html.lang-rtl .lc-nav span { display: inline-block; transform: scaleX(-1); }
.lc-dots { display: flex; justify-content: center; gap: 7px; padding: 12px 0 0; }
.lc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--iv-muted) 45%, transparent); cursor: pointer; transition: width .25s cubic-bezier(.2, .8, .2, 1), background .2s; }
.lc-dot[aria-selected="true"] { width: 22px; background: var(--iv-a); }
.lc-dot:focus-visible { outline: 2px solid var(--iv-a); outline-offset: 3px; }
.lr { display: grid; border: 1px solid var(--iv-line); border-radius: 16px; overflow: hidden; background: var(--iv-card); }
.lr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--iv-line); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: background .15s, box-shadow .2s; }
.lr-row:last-child { border-bottom: 0; }
.lr-row:hover { background: color-mix(in srgb, var(--iv-a) 6%, transparent); }
.lr-row[aria-current] { background: color-mix(in srgb, var(--iv-a) 11%, transparent); box-shadow: inset 3px 0 0 var(--iv-a); }
html.lang-rtl .lr-row[aria-current] { box-shadow: inset -3px 0 0 var(--iv-a); }
.lr-row:focus-visible { outline: 2px solid var(--iv-a); outline-offset: -3px; }
.lr-sym { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, var(--c1), var(--c2)); font-size: 19px; box-shadow: 0 4px 10px #0003; }
.lr-txt { display: grid; min-width: 0; }
.lr-txt b { font-size: 15px; }
.lr-txt small { color: var(--iv-muted); font-size: 12.5px; line-height: 1.4; }
.lr-chev { color: var(--iv-muted); font-size: 20px; transition: transform .2s; }
.lr-row:hover .lr-chev { transform: translateX(3px); }
html.lang-rtl .lr-chev { transform: scaleX(-1); }
html.lang-rtl .lr-row:hover .lr-chev { transform: scaleX(-1) translateX(3px); }

/* ---------- Écrans étroits, mouvement réduit, appareil modeste ---------- */
@media (max-width: 700px) {
  .inv { padding: 16px 14px 24px; }
  .inv-hero { flex-direction: column-reverse; align-items: flex-start; padding: 20px; }
  .inv-count { width: 88px; height: 88px; }
  .wi-grid { grid-template-columns: 1fr; grid-auto-rows: 210px; }
  .wi-tile:nth-child(n) { grid-column: auto; grid-row: auto; }
  .lc-slide { padding: 16px 48px 12px; }
  .lc-slide .inv-art { height: 150px; }
  .lc-nav { width: 34px; height: 34px; margin-top: -17px; }
  .lc-prev { inset-inline-start: 6px; } .lc-next { inset-inline-end: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .inv *, .inv *::before, .inv *::after { animation: none !important; transition: none !important; }
  .wi-tile { opacity: 1; transform: none; }
}
body.no-anim .inv *, body.no-anim .inv *::before, body.no-anim .inv *::after { animation: none !important; transition: none !important; }
body.no-anim .wi-tile { opacity: 1; transform: none; }
.perf-lite .wi-face { box-shadow: none; }
.perf-lite .inv-art svg { filter: none; }

/* Fenêtre Windows « Centres d'intérêt » : largeur */
@media (min-width: 781px) { .window.interests-window { width: min(900px, calc(100vw - 32px)); } }

/* Persan : la mise en page se lit de droite à gauche (le site n'inverse pas <html> : chaque vue pose direction: rtl sur sa racine) */
html.lang-rtl .inv { direction: rtl; }