/* enhance.css — surcouche non destructive (XP OS intro + FX légers) */

/* Layering propre */
:root {
  --intro-z: 20000;
  --fx-z: 15000;
}

/* On cache le bureau pendant l'intro (via class ajoutée en JS) */
html.is-booting #desktop {
  visibility: hidden;
}

/* Intro overlay full-screen */
#boot-intro {
  position: fixed;
  inset: 0;
  z-index: var(--intro-z);
  background: #000;
  color: #d6e7ff;
  font-family: Tahoma, Verdana, sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#boot-intro .boot-frame {
  width: min(920px, 92vw);
  padding: 28px 26px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(1200px 500px at 50% 35%, rgba(40,120,255,0.12), rgba(0,0,0,0.92));
  box-shadow: 0 18px 60px rgba(0,0,0,0.75);
  border-radius: 10px;
}

/* “écran qui s’allume” : vignettage doux + glow discret */
#boot-intro::before {
  content: "";
  position: absolute;
  inset: -40px;
  background: radial-gradient(900px 500px at 50% 40%, rgba(100,170,255,0.10), rgba(0,0,0,0.95));
  filter: blur(0px);
  opacity: 1;
  pointer-events: none;
}

#boot-intro .boot-title {
  font-size: 14px;
  letter-spacing: 0.2px;
  color: rgba(214, 231, 255, 0.92);
  margin-bottom: 10px;
}

#boot-intro .boot-sub {
  font-size: 12px;
  color: rgba(214, 231, 255, 0.75);
  margin-bottom: 18px;
}

#boot-intro .boot-log {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(214, 231, 255, 0.86);
  height: 220px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  padding: 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#boot-intro .boot-progress {
  margin-top: 14px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

#boot-intro .boot-progress > i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(120,190,255,0.20), rgba(120,190,255,0.85));
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(120,190,255,0.35);
}

/* CTA plein écran (pro, minimal) */
#boot-intro .boot-cta {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

#boot-intro .boot-cta .hint {
  font-size: 12px;
  color: rgba(214, 231, 255, 0.72);
}

#boot-intro .boot-cta button {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(214, 231, 255, 0.90);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

#boot-intro .boot-cta button:hover {
  filter: brightness(1.06);
}

/* Fade out intro */
#boot-intro.is-done {
  opacity: 0;
  transform: scale(1.01);
  transition: opacity 420ms ease, transform 420ms ease;
  pointer-events: none;
}

/* FX CRT légers sur le bureau (non sombre, non agressif) */
#desktop.fx-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--fx-z);
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.04),
      rgba(0,0,0,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.22;
}

#desktop.fx-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: calc(var(--fx-z) - 1);
  background: radial-gradient(900px 520px at 50% 35%, rgba(255,255,255,0.10), transparent 60%);
  opacity: 0.40;
}

/* Optionnel : petite “respiration” au focus des fenêtres */
.window {
  will-change: transform;
}
.window.active {
  transform: translateZ(0);
}

/* Accessibilité / motion */
@media (prefers-reduced-motion: reduce) {
  #boot-intro.is-done {
    transition: none;
  }
}

/* Bibliothèque LA MARGE intégrée dans une fenêtre du bureau XP */
#win-lamarge{width:min(1200px,calc(100vw - 28px));height:min(800px,calc(100vh - 74px));min-height:340px;display:none;overflow:hidden}
#win-lamarge .lamarge-content{padding:0;height:calc(100% - 26px);overflow:hidden;background:#11120f}
#win-lamarge iframe{display:block;width:100%;height:100%;border:0;background:#11120f}
@media(max-width:700px){#win-lamarge{width:calc(100vw - 12px);height:calc(100vh - 65px);min-height:300px}}


/* Fenêtres professionnelles : plus compactes et avec lecture confortable */
.portfolio-project-window{width:min(640px,calc(100vw - 30px));height:min(610px,calc(100vh - 78px));min-height:275px;overflow:hidden}
.portfolio-project-window .projects-content{height:calc(100% - 26px);overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 25px;font-size:15px;line-height:1.65;scrollbar-color:#7c9cc5 #f0f2f5}
.portfolio-project-window .projects-content h1{font-size:24px;margin-bottom:16px}
.portfolio-project-window .project-card{padding:16px;margin:0 0 16px}
.portfolio-project-window .project-card h2{font-size:19px;line-height:1.3;margin-bottom:9px}
.portfolio-project-window .project-card p,.portfolio-project-window .project-card li{font-size:15px;line-height:1.62}
.portfolio-project-window .project-meta{font-size:14px}
.portfolio-project-window .project-card ul{padding-left:22px;margin:12px 0}
#win-contact{width:min(750px,calc(100vw - 28px));max-height:calc(100vh - 76px);overflow:hidden}
#win-contact .contact-content{overflow:auto;max-height:calc(100vh - 107px);padding:18px}
#contact-form label{font-weight:700;display:block;margin:10px 0 5px}
#contact-form input:not([type=hidden]),#contact-form textarea{font-size:14px;padding:9px;line-height:1.4}
#contact-form button{margin-top:10px;cursor:pointer}
#contact-form button:disabled{opacity:.65;cursor:progress}
#contact-form .contact-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
#contact-form small{display:block;color:#585e68;margin-top:8px;line-height:1.5}
#contact-form a{color:#134b94}
.contact-feedback{min-height:20px;margin:10px 0 2px;font-size:13px;font-weight:700;color:#185729}
.contact-feedback.is-error{color:#b42318}
/* Interactions légères, accessibles, sans ralentir le bureau */
.desktop-icon{transition:transform .16s ease,filter .16s ease;cursor:pointer}
.desktop-icon:hover{transform:translateY(-3px) scale(1.05);filter:brightness(1.12)}
.desktop-icon:active{transform:scale(.97)}
.window.is-opening{animation:xpWindowOpen .22s cubic-bezier(.18,.75,.21,1) both}
@keyframes xpWindowOpen{from{opacity:0;transform:translateY(10px) scale(.977)}to{opacity:1;transform:translateY(0) scale(1)}}
.taskbar-button{transition:background-color .17s ease,filter .17s ease}
.taskbar-button:hover{filter:brightness(1.12)}
.window .btn-close,.window .btn-minimize{transition:background-color .13s ease}
@media(max-width:720px){.contact-columns{grid-template-columns:1fr;gap:12px}.portfolio-project-window{width:calc(100vw - 18px);height:calc(100vh - 75px)}.portfolio-project-window .projects-content{padding:12px}#win-contact{max-width:calc(100vw - 12px)}}
@media(prefers-reduced-motion:reduce){.window.is-opening{animation:none!important}.desktop-icon,.taskbar-button{transition:none!important}}
/* Le pseudo-YouTube conserve une esthétique 2009 */
.yt-window{width:min(980px,calc(100vw - 26px));height:min(720px,calc(100vh - 70px));min-height:310px;overflow:hidden}
#retro-youtube{height:calc(100% - 26px);overflow-y:auto;overscroll-behavior:contain;background:#f7f7f7;color:#242424;padding:0 0 20px;font:13px Arial,sans-serif}
.yt-site-header{padding:13px 16px;display:flex;align-items:center;gap:24px;background:#fff;border-bottom:1px solid #c9c9c9;flex-wrap:wrap}
.yt-brand{font-size:29px;letter-spacing:-1.5px;font-weight:bold;white-space:nowrap}.yt-brand small{font-size:12px;color:#777;letter-spacing:0}.yt-brand small span{color:#c33}
.yt-play{display:inline-block;background:linear-gradient(#e33,#a11);color:#fff;border-radius:8px;padding:4px 9px;font-size:19px;vertical-align:middle;letter-spacing:0}
.yt-search-form{display:flex;min-width:230px;flex:1;max-width:590px}.yt-search-form input{flex:1;min-width:0;padding:10px;border:1px solid #aaa;font:13px Arial,sans-serif}.yt-search-form button{padding:10px 16px;border:1px solid #aaa;background:linear-gradient(#fefefe,#ddd);color:#333;cursor:pointer}
.yt-notice{margin:12px 16px;background:#eaf2fb;border:1px solid #aac4e9;padding:11px 14px;line-height:1.5}
.yt-navigation{display:flex;overflow:auto;gap:7px;border-bottom:1px solid #ccc;padding:5px 16px 11px}
.yt-navigation button{white-space:nowrap;background:#e7e7e7;border:1px solid #ccc;border-radius:3px;padding:8px 13px;cursor:pointer;font-weight:600;color:#444}
.yt-navigation button[aria-pressed=true]{background:#cc2323;color:white;border-color:#a41b1b}
.yt-feature{display:flex;gap:18px;background:#fff;margin:16px;border:1px solid #ddd;padding:16px}
.yt-feature-icon{background:linear-gradient(145deg,#d22,#690303);color:#fff;min-width:140px;display:grid;place-items:center;font-size:45px;border-radius:5px}
.yt-feature h2{font-size:20px;margin:7px 0}.yt-feature span{font-size:10px;color:#888;font-weight:700}.yt-feature p{line-height:1.5;margin:7px 0}.yt-feature a{font-weight:700;color:#225a96}
.yt-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 16px 12px}.yt-section-head h2{font-size:18px}.yt-section-head span{color:#777;font-size:11px}
.yt-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;padding:0 16px}
.yt-card{min-width:0;transition:transform .16s ease}.yt-card:hover{transform:translateY(-3px)}
.yt-thumb{aspect-ratio:16/9;border:1px solid rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#fff;font-size:42px;text-shadow:0 2px 8px #0006;border-radius:3px}
.yt-thumb::after{content:'RECHERCHE ↗';position:absolute;right:6px;bottom:6px;background:#111c;padding:3px 5px;color:#fff;font-size:10px;letter-spacing:.03em;text-shadow:none}
.yt-card h3{font-size:14px;line-height:1.38;margin:8px 0 5px}.yt-card h3 a{color:#1559a0;text-decoration:none}.yt-card h3 a:hover{text-decoration:underline}
.yt-card p{margin:2px 0;color:#666;font-size:11px}.yt-card .yt-source{font-weight:700;color:#444}.yt-footer-note{margin:22px 16px 0;color:#777;font-size:11px;line-height:1.55}
@media(max-width:600px){.yt-feature-icon{display:none}.yt-video-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}.yt-brand{font-size:23px}.yt-site-header{gap:12px}}

/* Lecteur YouTube à déclenchement volontaire : aucun chargement avant lecture */
.yt-player-panel{margin:14px 16px 18px;padding:16px;background:#fff;border:1px solid #ccc;border-top:3px solid #c32626}
.yt-player-panel h2{font:700 17px Arial,sans-serif;margin:0 0 6px}
.yt-player-panel p{font-size:12px;line-height:1.55;color:#666;margin:6px 0}
.yt-player-form{display:flex;gap:7px;margin:12px 0 0;flex-wrap:wrap}
.yt-player-form input{padding:10px;flex:1;min-width:180px;border:1px solid #bbb;font-size:13px}
.yt-player-form button{padding:10px 15px;background:#c11d1d;color:white;border:0;font:700 12px Arial,sans-serif;cursor:pointer}
.yt-player-target{width:min(100%,720px);aspect-ratio:16/9;margin:12px auto 6px;background:#111}
.yt-player-target[hidden]{display:none}
.yt-player-target iframe{width:100%;height:100%;display:block;border:0}


/* LA MARGE : mode maximisé type Windows XP, sans rechargement de l'iframe. */
#win-lamarge.is-maximized{
  position:fixed!important;
  top:0!important;left:0!important;
  width:100vw!important;
  height:calc(100dvh - 32px)!important;
  max-width:none!important;max-height:none!important;
  min-height:0!important;
  margin:0!important;
  transform:none!important;
  border-radius:0;
}
#win-lamarge .btn-maximize{
  min-width:18px;
  cursor:pointer;
}
@media(max-width:700px){
  #win-lamarge.is-maximized{height:calc(100dvh - 48px)!important}
}