/* ============================================================
   os.css — chrome macOS (menu bar, dock, fenêtres, bureau)
   Ne contient aucune règle de contenu : le contenu des fenêtres
   reste stylé par style.css (.pillar, .testimonial, .tag, etc.)
   ============================================================ */

:root {
  --os-menubar-h: 28px;
  --os-chrome-line: rgba(18, 32, 58, 0.12);
  --os-titlebar: linear-gradient(#FBF9F7, #F0ECE6);
  --os-win-bg: #FFFFFF;
  --os-radius: 12px;
  --os-shadow-idle: 0 4px 16px rgba(18, 32, 58, .12), 0 0 0 1px rgba(18, 32, 58, .08);
  --os-shadow-active: 0 24px 60px rgba(18, 32, 58, .28), 0 0 0 1px rgba(18, 32, 58, .12);
  --os-blur: saturate(180%) blur(20px);
}

html, body { height: 100%; }
body.os { margin: 0; overflow: hidden; }

/* ---------- Apparence sombre (Réglages > Apparence) — s'applique
   uniformément à toutes les applications et au header : chaque couleur
   de contenu (--color-*, définies dans style.css) et chaque couleur de
   chrome (--os-*) est redéfinie ici, pas de fenêtre "toujours sombre"
   à part. ---------- */
html[data-theme="dark"] {
  --os-win-bg: #1C1C1E;
  --os-chrome-line: rgba(255, 255, 255, 0.12);
}

/* ---------- Liquid Glass (chrome uniquement : menu bar, dock, popovers,
   barres de titre — jamais sur du contenu texte, ça nuirait à la lisibilité) ---------- */
.liquid-glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.30));
  backdrop-filter: var(--os-blur);
  -webkit-backdrop-filter: var(--os-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 8px rgba(255, 255, 255, 0.20),
    0 10px 34px rgba(18, 32, 58, 0.20);
}
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .liquid-glass { background: var(--color-bg); }
}
html[data-theme="dark"] .liquid-glass {
  background: linear-gradient(180deg, rgba(40, 40, 44, 0.75), rgba(20, 20, 24, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 8px rgba(0, 0, 0, 0.35),
    0 10px 34px rgba(0, 0, 0, 0.45);
}

/* ---------- Bureau / fond d'écran : la vraie photo "Sierra" (macOS) par
   défaut, avec un dégradé montagnes en repli si l'image ne charge pas. ---------- */
#desktop {
  position: fixed;
  inset: var(--os-menubar-h) 0 0 0;
  overflow: hidden;
  background-image: url('/images/wallpapers/Sierra.webp'),
    linear-gradient(180deg, #2A3752 0%, #6B5A72 24%, #B27884 44%, #E0906C 60%, #F0AD79 70%, #F6CE96 78%, #16192A 100%);
  background-size: cover, cover;
  background-position: center, center;
}
/* Fond d'écran personnalisé (choisi dans Réglages > Fond d'écran) : une autre
   photo remplace "Sierra", donc on masque les reliefs dessinés du repli. */
#desktop.wallpaper-custom::before,
#desktop.wallpaper-custom::after,
#desktop.wallpaper-custom .desktop__glow { display: none; }

#desktop::before,
#desktop::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: 0;
  pointer-events: none;
  display: none; /* masqués par défaut : la vraie photo Sierra les rend inutiles */
}
#desktop::before {
  height: 58%;
  background: linear-gradient(180deg, #3B3346 0%, #221E30 100%);
  clip-path: polygon(0% 100%, 0% 58%, 7% 44%, 15% 54%, 23% 24%, 32% 48%, 41% 16%, 50% 44%, 59% 9%, 69% 40%, 78% 20%, 87% 46%, 95% 26%, 100% 50%, 100% 100%);
  opacity: 0.92;
}
#desktop::after {
  height: 38%;
  background: linear-gradient(180deg, #17141F 0%, #0B0A12 100%);
  clip-path: polygon(0% 100%, 0% 72%, 11% 56%, 21% 70%, 33% 42%, 45% 64%, 57% 36%, 69% 60%, 81% 40%, 91% 62%, 100% 46%, 100% 100%);
}
.desktop__glow {
  position: absolute;
  left: 34%; top: 30%;
  width: 42%; height: 30%;
  background: radial-gradient(ellipse at center, rgba(255, 214, 160, 0.55), transparent 70%);
  filter: blur(2px);
  pointer-events: none;
}

/* ---------- Boîte d'alerte façon Finder (page 404) ---------- */
.alert-dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 420px;
  max-width: calc(100% - 32px);
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: var(--os-shadow-active);
  padding: 28px 26px 20px;
  display: flex;
  gap: 16px;
}
.alert-dialog__icon img { display: block; border-radius: 14px; }
.alert-dialog__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alert-dialog__title { font-size: 15px; font-weight: 700; color: var(--color-ink); margin: 0; }
.alert-dialog__desc { font-size: 13px; color: var(--color-text-muted); margin: 0; line-height: 1.5; }
.alert-dialog__desc code {
  background: var(--color-bg-alt);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  word-break: break-all;
}
.alert-dialog__actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.alert-dialog__actions .btn { padding: 8px 18px; font-size: 13px; }

.desktop__intro {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 64px auto 0;
  padding: 0 32px;
  text-align: center;
  color: #FFFFFF;
}
.desktop__intro h1 { font-size: 32px; line-height: 1.2; font-weight: 700; margin: 20px 0 24px; }
.desktop__intro p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; }
.desktop__intro .hero__actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ---------- Menu bar (transparente, posée directement sur le fond d'écran,
   comme sur un vrai bureau macOS) ---------- */
.menubar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--os-menubar-h);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 13px;
  color: var(--color-heading);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  backdrop-filter: var(--os-blur);
  -webkit-backdrop-filter: var(--os-blur);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
html[data-theme="dark"] .menubar {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, rgba(40, 40, 44, 0.70), rgba(20, 20, 24, 0.55));
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
@supports not (backdrop-filter: blur(1px)) {
  .menubar { background: var(--color-bg); }
}
.menubar__left { display: flex; align-items: center; gap: 10px; }
.menubar__apple { display: inline-flex; }
.menubar__apple svg { width: 14px; height: 14px; display: block; color: inherit; }
.menubar__brand { font-weight: 700; }
.menubar__right { display: flex; align-items: center; gap: 2px; }
.menubar__nowplaying { display: flex; align-items: center; gap: 2px; margin-right: 6px; padding-right: 6px; border-right: 1px solid rgba(0, 0, 0, 0.25); }
html[data-theme="dark"] .menubar__nowplaying { border-right-color: rgba(255, 255, 255, 0.25); }
.menubar__nowplaying[hidden] { display: none; }
.menubar__np-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px 5px;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  text-shadow: inherit;
}
.menubar__np-btn:hover { background: rgba(0, 0, 0, 0.12); }
html[data-theme="dark"] .menubar__np-btn:hover { background: rgba(255, 255, 255, 0.16); }
.menubar__np-btn svg { width: 14px; height: 14px; display: block; }
.menubar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 9px;
  border-radius: 6px;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
  text-shadow: inherit;
}
.menubar__item:hover,
.menubar__item[aria-expanded="true"] { background: rgba(0, 0, 0, 0.12); }
html[data-theme="dark"] .menubar__item:hover,
html[data-theme="dark"] .menubar__item[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.menubar__item svg { width: 15px; height: 15px; display: block; }

.menubar__panel {
  position: fixed;
  top: var(--os-menubar-h);
  right: 12px;
  z-index: 950;
  width: 240px;
  border-radius: 14px;
  padding: 16px;
  font-size: 13px;
  color: var(--color-text);
}
.menubar__panel h3 { margin: 0 0 8px; font-size: 13px; color: var(--color-heading); }
.menubar__panel p { margin: 0 0 6px; color: var(--color-text-muted); line-height: 1.5; }
.menubar__panel a { color: var(--color-accent-btn); font-weight: 600; }

.menubar__panel--left { left: 12px; right: auto; width: 220px; padding: 6px; }
.menubar__menuitem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--color-heading);
  cursor: pointer;
}
.menubar__menuitem:hover { background: rgba(0, 0, 0, 0.06); }
html[data-theme="dark"] .menubar__menuitem:hover { background: rgba(255, 255, 255, 0.1); }
.menubar__menu-sep { height: 1px; margin: 6px 8px; background: var(--color-border); }
.menubar__menu-empty { margin: 0; padding: 7px 10px; font-size: 13px; color: var(--color-text-muted); }

/* ---------- Dock ---------- */
.dock {
  position: fixed;
  bottom: 10px;
  left: 0; right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Le bandeau cookies (style.css) doit rester au-dessus du dock, jamais dessous. */
.cookie-banner {
  bottom: 104px;
  z-index: 950;
}
@media (max-width: 899px) {
  .cookie-banner { bottom: 16px; }
}
.dock__bar {
  pointer-events: auto;
  display: flex;
  gap: 8px;
  padding: 8px 14px 4px;
  border-radius: 20px;
}
.dock__item {
  background: none;
  border: none;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 4px 0;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s ease;
}
.dock__item:hover,
.dock__item:focus-visible { transform: scale(1.15) translateY(-6px); }
.dock__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  box-shadow: 0 2px 6px rgba(18, 32, 58, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dock__icon img { width: 100%; height: 100%; display: block; }
.dock__label {
  font-size: 10px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dock__item:hover .dock__label,
.dock__item:focus-visible .dock__label { opacity: 1; }
.dock__item::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: transparent;
  margin-top: 2px;
}
.dock__item.is-running::after { background: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .dock__item, .dock__item:hover { transform: none; transition: none; }
}

/* ---------- Fenêtres ---------- */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--os-win-bg);
  border-radius: var(--os-radius);
  box-shadow: var(--os-shadow-idle);
  overflow: hidden;
  outline: none; /* la fenêtre reçoit le focus par programme à l'ouverture ;
                    le contenu interactif à l'intérieur garde son propre anneau de focus */
}
.window.is-active { box-shadow: var(--os-shadow-active); }
.window[hidden] { display: none; }

.window__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid var(--os-chrome-line);
  touch-action: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5));
  backdrop-filter: var(--os-blur);
  -webkit-backdrop-filter: var(--os-blur);
}
html[data-theme="dark"] .window__bar {
  background: linear-gradient(180deg, rgba(52, 52, 56, 0.78), rgba(32, 32, 36, 0.55));
}
@supports not (backdrop-filter: blur(1px)) {
  .window__bar { background: var(--os-win-bg); }
}
.window__lights { display: flex; gap: 8px; flex: none; }
.light {
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #D6D2CC;
  cursor: pointer;
}
.window.is-active .light--close { background: #FF5F57; }
.window.is-active .light--min { background: #FEBC2E; }
.window.is-active .light--zoom { background: #28C840; }
.light:focus-visible { outline: 2px solid var(--color-accent-btn); outline-offset: 2px; }

/* Les glyphes (×, −, +) n'apparaissent qu'au survol du groupe, comme sur macOS. */
.light::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.light--close::after { content: "×"; color: rgba(78, 0, 0, 0.75); }
.light--min::after { content: "−"; color: rgba(102, 58, 0, 0.75); }
.light--zoom::after { content: "+"; color: rgba(0, 68, 15, 0.75); }
.window__lights:hover .light::after,
.light:focus-visible::after { opacity: 1; }

.window__back {
  display: none;
  background: none;
  border: none;
  color: var(--color-accent-btn);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
}

.window__title {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  padding-right: 54px;
}

.window__body {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);
}
.window__body .container { padding: 32px 28px; max-width: none; }
.window__body .container--narrow { max-width: 560px; margin: 0 auto; }
.window__body .section { padding: 0; }

/* Les fenêtres sont plus étroites que le viewport : les grilles pensées pour
   une page pleine largeur doivent rester en une colonne dans ce contexte. */
.window__body .testimonials { grid-template-columns: 1fr; }

/* ---------- App Notes : deux volets, liste + contenu — thème clair par
   défaut, thème sombre quand Réglages > Apparence est basculé. ---------- */
.notes-app { display: flex; height: 100%; color: var(--color-text); }
.notes-app__sidebar {
  width: 260px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 12px 10px;
}
.notes-app__search {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}
.notes-app__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 10px 8px 6px;
}
.notes-app__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: inherit;
  margin-bottom: 2px;
}
.notes-app__item:hover { background: rgba(0, 0, 0, 0.05); }
.notes-app__item.is-active { background: #F0D68A; }
.notes-app__item-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-app__item-meta {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notes-app__item.is-active .notes-app__item-meta { color: rgba(0, 0, 0, 0.6); }

.notes-app__content { flex: 1; overflow-y: auto; padding: 34px 48px; }
.notes-app__note[hidden] { display: none; }
.notes-app__date { text-align: center; font-size: 12px; color: var(--color-text-muted); margin: 0 0 20px; }
.notes-app__note-title { font-size: 26px; font-weight: 700; color: var(--color-heading); margin: 0 0 20px; }
.notes-app__note-body { color: var(--color-text); font-size: 15px; line-height: 1.7; }
.notes-app__note-body ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.notes-app__note-body p { margin: 0 0 14px; }
.notes-app__note-body a { color: var(--color-accent-btn); }
.notes-app__note-subhead { font-size: 17px; font-weight: 700; color: var(--color-heading); margin: 24px 0 12px; }
.notes-app__note-placeholder {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

html[data-theme="dark"] .notes-app__item.is-active { background: #8A6D2F; }
html[data-theme="dark"] .notes-app__item.is-active .notes-app__item-meta { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 899px) {
  .notes-app__sidebar { width: 42%; min-width: 150px; padding: 10px 6px; }
  .notes-app__content { padding: 24px 18px; }
  .notes-app__note-title { font-size: 20px; }
}

/* ---------- App Musique : deux volets + barre de lecture fixe en bas ---------- */
#win-music .window__body { display: flex; flex-direction: column; overflow: hidden; }
.music-app { display: flex; flex: 1; min-height: 0; color: #E9E9EC; }
.music-app__sidebar {
  width: 200px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  padding: 12px 10px;
}
.music-app__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 10px 8px 6px;
}
.music-app__nav-item {
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-heading);
}
.music-app__nav-item.is-active { background: #F0D68A; }
html[data-theme="dark"] .music-app__nav-item.is-active { background: #8A6D2F; }

.music-app__content { flex: 1; overflow-y: auto; padding: 28px 34px; }
.music-app__heading { font-size: 22px; font-weight: 700; color: var(--color-heading); margin: 0 0 18px; }
.music-app__list { list-style: none; margin: 0; padding: 0; }
.music-app__track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border-radius: 8px;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.music-app__track:hover { background: rgba(0, 0, 0, 0.05); }
.music-app__track.is-playing { background: rgba(230, 52, 98, 0.18); }
.music-app__play {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-text-muted);
}
.music-app__track.is-playing .music-app__play { color: #E63462; }
.music-app__play svg { width: 16px; height: 16px; }
.music-app__track-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--color-heading); }
.music-app__track-meta { font-size: 12px; color: var(--color-text-muted); }

.music-app__player {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}
.music-app__player-btn {
  flex: none;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-heading);
}
.music-app__player-btn svg { width: 18px; height: 18px; }
.music-app__player-play { width: 36px; height: 36px; color: #E63462; }
.music-app__player-play svg { width: 22px; height: 22px; }
.music-app__player-info { flex: 1; min-width: 0; }
.music-app__player-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-app__progress { height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.12); overflow: hidden; }
html[data-theme="dark"] .music-app__progress { background: rgba(255, 255, 255, 0.15); }
.music-app__progress-bar { height: 100%; width: 0%; background: #E63462; }

@media (max-width: 899px) {
  .music-app__sidebar { width: 42%; min-width: 130px; padding: 10px 6px; }
  .music-app__content { padding: 20px 16px; }
}

/* ---------- App Réglages : même schéma deux volets que Notes ---------- */
.settings-app { display: flex; height: 100%; color: var(--color-text); }
.settings-app__sidebar {
  width: 220px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 12px 10px;
}
.settings-app__profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.settings-app__profile img { border-radius: 50%; display: block; }
.settings-app__profile-name { display: block; font-size: 13px; font-weight: 600; color: var(--color-heading); }
.settings-app__profile-sub { display: block; font-size: 11px; color: var(--color-text-muted); }
.settings-app__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--color-heading);
  cursor: pointer;
}
.settings-app__nav-item:hover { background: rgba(0, 0, 0, 0.05); }
.settings-app__nav-item.is-active { background: #3A6DF0; color: #FFFFFF; }
.settings-app__nav-icon { font-size: 15px; }

.settings-app__content { flex: 1; overflow-y: auto; padding: 34px 48px; }
.settings-app__pane[hidden] { display: none; }
.settings-app__pane-title { font-size: 24px; font-weight: 700; color: var(--color-heading); margin: 0 0 10px; }
.settings-app__pane-lead { font-size: 14px; color: var(--color-text-muted); margin: 0 0 28px; }

.settings-app__swatches { display: flex; gap: 20px; }
.settings-app__swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
}
.settings-app__swatch-preview {
  width: 120px; height: 80px;
  border-radius: 10px;
  border: 2px solid transparent;
  display: block;
}
.settings-app__swatch-preview--light { background: linear-gradient(135deg, #FAF8F5 60%, #1F3A5F 60%); }
.settings-app__swatch-preview--dark { background: linear-gradient(135deg, #1C1C1E 60%, #0A0A0C 60%); }
.settings-app__swatch.is-selected { color: var(--color-heading); }
.settings-app__swatch.is-selected .settings-app__swatch-preview { border-color: #3A6DF0; }

.settings-app__wallpapers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.settings-app__wallpaper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
}
.settings-app__wallpaper-preview {
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  display: block;
  background: var(--color-bg-alt);
}
.settings-app__wallpaper-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.settings-app__wallpaper-preview--default {
  background: linear-gradient(180deg, #2A3752 0%, #B27884 44%, #F0AD79 70%, #16192A 100%);
}
.settings-app__wallpaper.is-selected { color: var(--color-heading); }
.settings-app__wallpaper.is-selected .settings-app__wallpaper-preview { border-color: #3A6DF0; }

@media (max-width: 899px) {
  .settings-app__sidebar { width: 42%; min-width: 150px; padding: 10px 6px; }
  .settings-app__content { padding: 24px 18px; }
  .settings-app__wallpapers { grid-template-columns: repeat(2, 1fr); }
}

.window__resize { position: absolute; z-index: 2; }
.window__resize--e  { top: 8px; right: 0; bottom: 8px; width: 6px; cursor: ew-resize; }
.window__resize--s  { left: 8px; right: 8px; bottom: 0; height: 6px; cursor: ns-resize; }
.window__resize--se { right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.window__resize--sw { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }

.window.is-maximized {
  top: 8px !important; left: 8px !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
}

/* ---------- Finder : barre latérale (Favoris + Liens) + volet de contenu ---------- */
.finder-app { display: flex; height: 100%; }
.finder-app__sidebar {
  width: 200px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--os-chrome-line);
  overflow-y: auto;
  padding: 12px 8px;
}
.finder-app__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 10px 8px 6px;
}
.finder-app__group-label:first-child { padding-top: 2px; }
.finder-app__nav-item {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.finder-app__nav-item:hover { background: rgba(0, 0, 0, 0.05); }
.finder-app__nav-item.is-active { background: var(--color-accent-btn); color: #FFFFFF; }

.finder-app__content { flex: 1; overflow-y: auto; padding: 28px; }
.finder-app__pane[hidden] { display: none; }
.finder-app__empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  margin-top: 60px;
}
.finder-app__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 18px;
}
.finder-app__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 10px 6px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text);
}
.finder-app__app:hover { background: rgba(0, 0, 0, 0.05); }
.finder-app__app img { width: 48px; height: 48px; border-radius: 11px; }

.finder-app__doc {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 32px 36px;
  box-shadow: 0 2px 10px rgba(18, 32, 58, 0.08);
}
.finder-app__doc h2 { font-size: 22px; color: var(--color-heading); margin: 0 0 20px; }
.finder-app__doc h3 { font-size: 15px; color: var(--color-heading); margin: 0 0 6px; }
.finder-app__doc section { margin-bottom: 20px; }
.finder-app__doc section:last-child { margin-bottom: 0; }
.finder-app__doc p { font-size: 14px; line-height: 1.7; color: var(--color-text); margin: 0; }
.finder-app__doc a { color: var(--color-accent-btn); }

@media (max-width: 899px) {
  .finder-app__sidebar { width: 42%; min-width: 150px; padding: 10px 6px; }
  .finder-app__content { padding: 20px 16px; }
}

/* ---------- App Mail : barre latérale de boîtes + volet de composition,
   façon Mail.app (champs soulignés, corps de message, barre d'envoi). ---------- */
.mail-app { display: flex; height: 100%; color: var(--color-text); }
.mail-app__sidebar {
  width: 170px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  padding: 12px 10px;
}
.mail-app__group-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: 10px 8px 6px;
}
.mail-app__mailbox { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 7px 8px; font-size: 13px; color: var(--color-heading); }
.mail-app__mailbox.is-active { background: #3A6DF0; color: #FFFFFF; }

.mail-app__compose { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.mail-app__compose form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mail-app__field-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.mail-app__field-row label,
.mail-app__field-label { flex: none; width: 90px; color: var(--color-text-muted); font-weight: 600; }
.mail-app__field-static { color: var(--color-text); }
.mail-app__field-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--color-text);
  padding: 4px 0;
  font-family: inherit;
}
.mail-app__field-row input:focus { outline: none; }

.mail-app__body {
  flex: 1;
  min-height: 140px;
  border: none;
  background: none;
  resize: none;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
  font-family: inherit;
}
.mail-app__body:focus { outline: none; }
.mail-app__body::placeholder { color: var(--color-text-muted); }

.mail-app__status { flex: none; padding: 0 20px; }
.mail-app__status .form-result:empty { margin: 0; }
.mail-app__toolbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
}
.mail-app__toolbar-hint { font-size: 12px; color: var(--color-text-muted); }
.mail-app__send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-btn);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mail-app__send:hover { background: #a04e21; }
.mail-app__send svg { width: 15px; height: 15px; }

@media (max-width: 899px) {
  .mail-app__sidebar { width: 42%; min-width: 130px; padding: 10px 6px; }
  .mail-app__field-row { padding: 8px 14px; }
  .mail-app__body { padding: 14px; }
  .mail-app__toolbar { padding: 10px 14px; }
}

/* ---------- App Photos : grande prévisualisation + pellicule de vignettes
   en bas, façon Finder en vue Galerie. ---------- */
.photos-app { display: flex; flex-direction: column; height: 100%; background: var(--color-bg-alt); }
.photos-app__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.photos-app__stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }

.photos-app__filmstrip {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.photos-app__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  background: var(--color-card);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photos-app__thumb:hover { background: var(--color-bg-alt); }
.photos-app__thumb.is-active { border-color: #3A6DF0; }
.photos-app__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- App Messages : conversations + fil de discussion, façon Messages.app ---------- */
.messages-app { display: flex; height: 100%; }
.messages-app__sidebar {
  width: 220px;
  flex: none;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  padding: 8px;
}
.messages-app__convo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  margin-bottom: 2px;
}
.messages-app__convo:hover { background: rgba(0, 0, 0, 0.05); }
.messages-app__convo.is-active { background: #3A6DF0; }
.messages-app__convo img { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; }
.messages-app__convo-text { min-width: 0; display: flex; flex-direction: column; }
.messages-app__convo-name { font-size: 13px; font-weight: 600; color: var(--color-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app__convo.is-active .messages-app__convo-name { color: #FFFFFF; }
.messages-app__convo-preview { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.messages-app__convo.is-active .messages-app__convo-preview { color: rgba(255, 255, 255, 0.8); }

.messages-app__thread { flex: 1; overflow-y: auto; padding: 28px 24px; }
.messages-app__conversation[hidden] { display: none; }
.messages-app__bubble {
  max-width: 78%;
  background: var(--color-bg-alt);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
}
.messages-app__bubble p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.messages-app__meta { margin: 10px 0 0; font-size: 12px; color: var(--color-text-muted); }
.messages-app__meta a { color: var(--color-accent-btn); font-weight: 600; }

@media (max-width: 899px) {
  .messages-app__sidebar { width: 42%; min-width: 150px; padding: 8px 6px; }
  .messages-app__thread { padding: 20px 16px; }
}

/* ---------- Liquid Glass sur les barres latérales des apps deux-volets
   (Notes, Réglages, Musique, Finder, Mail, Messages) — même matériau
   translucide que le header/dock/barres de titre, pour l'effet vibrancy
   macOS. ---------- */
.notes-app__sidebar,
.settings-app__sidebar,
.music-app__sidebar,
.finder-app__sidebar,
.mail-app__sidebar,
.messages-app__sidebar {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: var(--os-blur);
  -webkit-backdrop-filter: var(--os-blur);
}
html[data-theme="dark"] .notes-app__sidebar,
html[data-theme="dark"] .settings-app__sidebar,
html[data-theme="dark"] .music-app__sidebar,
html[data-theme="dark"] .finder-app__sidebar,
html[data-theme="dark"] .mail-app__sidebar,
html[data-theme="dark"] .messages-app__sidebar {
  background: rgba(28, 28, 30, 0.6);
}
@supports not (backdrop-filter: blur(1px)) {
  .notes-app__sidebar,
  .settings-app__sidebar,
  .music-app__sidebar,
  .finder-app__sidebar,
  .mail-app__sidebar,
  .messages-app__sidebar { background: var(--color-bg-alt); }
}

/* ---------- Overlay système : veille / verrouillage / démarrage /
   extinction, déclenchés depuis le menu Apple. ---------- */
.system-overlay { position: fixed; inset: 0; z-index: 2000; opacity: 1; transition: opacity 0.28s ease; }
.system-overlay[hidden] { display: none; }
.system-overlay__screen {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.system-overlay[data-state="sleep"] .system-overlay__screen[data-view="sleep"],
.system-overlay[data-state="off"] .system-overlay__screen[data-view="off"],
.system-overlay[data-state="boot"] .system-overlay__screen[data-view="boot"],
.system-overlay[data-state="lock"] .system-overlay__screen[data-view="lock"] {
  display: flex;
}
.system-overlay__screen--black { background: #000000; cursor: pointer; }
.system-overlay__screen--boot { background: #F5F5F7; gap: 36px; }
.system-overlay__logo { width: 64px; height: 64px; color: #1D1D1F; }
.system-overlay__progress { width: 200px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.15); overflow: hidden; }
.system-overlay__progress-bar { height: 100%; width: 0%; background: #1D1D1F; border-radius: 2px; transition: width 2.2s linear; }

.system-overlay__screen--lock {
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
  gap: 28px;
  cursor: pointer;
}
.system-overlay__lock-clock { display: flex; flex-direction: column; align-items: center; gap: 6px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
.system-overlay__lock-date { font-size: 20px; font-weight: 500; }
.system-overlay__lock-time { font-size: 84px; font-weight: 600; line-height: 1; }
.system-overlay__lock-user { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.system-overlay__lock-avatar { border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.system-overlay__lock-name { margin: 4px 0 0; font-size: 16px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }
.system-overlay__lock-hint { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.8); }

/* ---------- Mobile : écran d'accueil iOS ---------- */
@media (max-width: 899px) {
  #desktop { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .desktop__intro { margin-top: 28px; }

  .dock { position: static; margin: 28px 0 48px; }
  .dock__bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px;
    width: calc(100% - 32px);
    max-width: 380px;
    margin: 0 auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .dock__bar::before { display: none; }
  .dock__bar { justify-items: center; }
  .dock__item:hover,
  .dock__item:focus-visible { transform: none; }
  /* L'icône mobile (56px) est plus large que le bouton (52px de base) : sans
     cette largeur auto, l'icône déborde de sa boîte et se recentre différemment
     du libellé en dessous, d'où le décalage entre l'icône et son nom. */
  .dock__item { width: auto; }
  .dock__label { opacity: 1; color: #FFFFFF; white-space: nowrap; }
  .dock__icon { width: 56px; height: 56px; font-size: 24px; }

  .window {
    /* Fiche façon fenêtre Mac qui glisse par-dessus le bureau : léger espace
       en haut (le fond d'écran reste visible sous la barre de menus) et
       coins arrondis, plutôt qu'une page mobile plate plein écran. */
    position: fixed !important;
    inset: calc(var(--os-menubar-h) + 14px) 0 0 0 !important;
    width: auto !important; height: auto !important;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
    z-index: 999 !important;
  }
  .window__resize { display: none; }
  .window__bar { height: 48px; }
  .window__lights { display: flex; }
  .window__back { display: inline-flex; font-size: 13px; opacity: 0.75; }
  .window__title { padding-right: 0; text-align: left; }

  /* Le flou (backdrop-filter) coûte cher sur mobile Safari, surtout cumulé sur
     plusieurs calques pendant un scroll : on garde la teinte translucide mais
     on retire le flou pour que le défilement reste fluide. */
  .menubar,
  .window__bar,
  .liquid-glass,
  .notes-app__sidebar,
  .settings-app__sidebar,
  .music-app__sidebar,
  .finder-app__sidebar,
  .mail-app__sidebar,
  .messages-app__sidebar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Le nom de l'app active (ex. "Photos — Ils me font confiance") peut être
     bien plus long que "Victor Ricci" : sans ceci il passe à la ligne et
     chevauche le Wi-Fi / batterie / horloge à droite. On tronque avec une
     ellipse plutôt que de laisser le bouton grandir sur 2 lignes. */
  .menubar { padding: 0 8px; }
  .menubar__left { gap: 6px; }
  .menubar__item { white-space: nowrap; padding: 4px 6px; }
  .menubar__brand { display: inline-block; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
}