/* Interface mobile : un vrai bureau tactile, fenêtres plein écran, barres accessibles */
@media(max-width:700px){
  html,body{width:100%;height:100%;min-height:100%;overflow:hidden}
  #desktop{width:100%;height:100vh;height:100dvh;background-position:56% center;overflow:hidden}
  #desktop .desktop-icons{
    top:0;left:0;right:0;
    width:100%;height:auto;
    max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px - env(safe-area-inset-bottom,0px));
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-content:start;justify-items:center;
    row-gap:17px;column-gap:6px;
    padding:22px 12px 40px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }
  #desktop .desktop-icons::-webkit-scrollbar{display:none}
  #desktop .desktop-icon{
    width:100%;max-width:116px;min-height:92px;
    padding:11px 6px 9px;border:1px solid transparent;border-radius:12px;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    gap:5px;touch-action:manipulation;
    text-shadow:0 2px 6px #001a4299;
  }
  #desktop .desktop-icon:focus-visible,#desktop .desktop-icon:active{
    background:#144a8990;border-color:#cce8ff88;outline:none;
  }
  #desktop .desktop-icon img{
    width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.32))
  }
  #desktop .desktop-icon span{
    text-align:center;font-size:11.5px;line-height:1.28;font-weight:700;
    overflow-wrap:anywhere;max-width:100%;
  }
  #desktop .desktop-icon:hover{transform:none}
  /* Le dock Windows XP reste utilisable au doigt, même avec beaucoup de fenêtres. */
  #desktop #taskbar{
    left:0;bottom:0;
    width:100%;height:calc(56px + env(safe-area-inset-bottom,0px));
    padding:5px 8px calc(6px + env(safe-area-inset-bottom,0px));
    gap:5px;z-index:14000;box-shadow:0 -4px 18px #0b2c6670;
    border-top:1px solid #83beef;
  }
  #desktop #start-button{
    height:39px;min-width:97px;padding:5px 10px;font-size:13px;
    border-radius:10px;justify-content:center;touch-action:manipulation;flex:0 0 auto;
  }
  #desktop #start-button .start-logo,#desktop #start-button .start-logo img{width:18px;height:18px}
  #desktop #taskbar-windows{
    display:flex;align-items:center;gap:5px;padding:0 2px;
    overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;min-width:0;
  }
  #desktop #taskbar-windows::-webkit-scrollbar{display:none}
  #desktop .taskbar-button{
    min-width:43px;max-width:120px;height:36px;flex:0 0 auto;
    padding:5px 8px;border-radius:7px;font-size:11px;max-width:120px;
  }
  #desktop #taskbar-right{gap:5px;flex:0 0 auto}
  #desktop #nostalgia-toggle{height:36px;min-height:36px;padding:5px 9px;font-size:11px;border-radius:7px}
  #desktop #clock{font-size:11px;min-width:32px;text-align:right}
  /* Toutes les fenêtres restent dans l'écran et le bouton X est accessible. */
  #desktop .window,
  #desktop .portfolio-project-window,
  #desktop #win-lamarge,
  #desktop #win-msn,
  #desktop #win-contact,
  #desktop .yt-window{
    position:absolute;
    left:7px!important;top:7px!important;right:7px!important;bottom:auto!important;
    width:calc(100% - 14px)!important;
    max-width:none!important;
    height:calc(100vh - 75px)!important;
    height:calc(100dvh - 75px - env(safe-area-inset-bottom,0px))!important;
    min-height:0!important;max-height:none!important;
    border-radius:11px;overflow:hidden;
    border:1px solid #2f649b;
    box-shadow:0 8px 32px #051c3b80;
  }
  #desktop .window>.titlebar{height:42px;min-height:42px;cursor:default;padding:0 9px;border-radius:9px 9px 0 0}
  #desktop .window .title{flex:1;min-width:0;max-width:calc(100% - 84px);display:flex;gap:7px;font-size:12px;align-items:center}
  #desktop .window .title span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #desktop .window .title img{width:20px;height:20px;object-fit:contain}
  #desktop .window-buttons{gap:6px;flex-shrink:0}
  #desktop .window-buttons button{width:34px;height:30px;font-size:14px;border-radius:7px;touch-action:manipulation}
  #desktop .window>.window-content{
    height:calc(100% - 42px);
    max-height:none!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px;
    font-size:14px;line-height:1.55;
  }
  #desktop .window .window-content h1{font-size:22px;line-height:1.25}
  #desktop .window .window-content h2{font-size:17px;line-height:1.3}
  #desktop .about-layout{display:flex;flex-direction:column;gap:14px}
  #desktop .about-photo{justify-content:flex-start}
  #desktop .about-photo img{width:112px;height:112px;margin:0;border:3px solid white}
  #desktop .about-text p,#desktop .about-text li{font-size:14px;line-height:1.65}
  #desktop .two-columns{columns:1}
  #desktop .contact-columns{grid-template-columns:minmax(0,1fr);gap:22px}
  #desktop .contact-content{padding:15px!important}
  #desktop .portfolio-project-window .projects-content{height:calc(100% - 42px);padding:16px}
  #desktop .portfolio-project-window .project-card h2{font-size:18px}
  #desktop .portfolio-project-window .project-card p,#desktop .portfolio-project-window .project-card li{font-size:14px}
  #desktop .cv-content{height:calc(100% - 42px);display:flex;flex-direction:column;gap:10px}
  #desktop .cv-frame{height:auto;min-height:250px;flex:1}
  #desktop #win-lamarge .lamarge-content{height:calc(100% - 42px);padding:0;overflow:hidden}
  #desktop #win-lamarge iframe{width:100%;height:100%;border:0}
  #desktop #win-msn .msn-app{height:calc(100% - 42px);padding:0;overflow:hidden}
  #desktop .yt-window #retro-youtube{height:calc(100% - 42px);padding:0;overflow-y:auto}
  #desktop .clippy-layout{grid-template-columns:1fr;gap:12px}
  #desktop .clippy-avatar{justify-content:flex-start}
  #desktop .clippy-avatar img{width:75px;height:75px}
  #desktop .mail-header{overflow-wrap:anywhere}
  /* Le menu Démarrer peut défiler au lieu de dépasser sous l'écran. */
  #desktop #start-menu{
    position:absolute;left:7px;right:7px;bottom:calc(61px + env(safe-area-inset-bottom,0px));
    width:calc(100% - 14px);height:auto;min-height:0;max-height:calc(100dvh - 78px - env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;border-radius:11px;
    z-index:14001;font-size:13px;
  }
  #desktop .start-header{height:auto;min-height:77px;padding:12px}
  #desktop .start-header-left img{width:51px;height:51px}
  #desktop .start-header-name{font-size:17px}
  #desktop .start-header-sub{font-size:11px;line-height:1.4}
  #desktop .start-body{grid-template-columns:minmax(0,1fr);gap:10px;padding:9px}
  #desktop .start-left,#desktop .start-right{min-height:0;padding:10px}
  #desktop .start-menu-list li{font-size:13px;padding:10px 8px;touch-action:manipulation}
  #desktop .start-menu-list-right li{font-size:12px}
  #desktop .msn-toast{bottom:calc(65px + env(safe-area-inset-bottom,0px));right:9px;max-width:calc(100vw - 18px)}
}
@media(max-width:410px){
  #desktop .desktop-icons{column-gap:0;row-gap:8px;padding:14px 7px 26px}
  #desktop .desktop-icon{min-height:87px}
  #desktop .desktop-icon img{width:43px;height:43px}
  #desktop .desktop-icon span{font-size:10.5px}
  #desktop #clock{display:none}
  #desktop #start-button{min-width:88px;font-size:12px}
  #desktop .taskbar-button{max-width:95px}
  #desktop .start-header-right{margin-left:10px}
}
@media(max-width:340px){
  #desktop .desktop-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
  #desktop #nostalgia-toggle{font-size:10px;padding:5px 6px}
  #desktop #taskbar{padding-inline:4px}
}
/* Tablette : écran plus petit, fenêtres bornées sans perdre le bureau */
@media(min-width:701px) and (max-width:1020px){
 #desktop .desktop-icons{gap:13px}
 #desktop .window{max-width:calc(100vw - 112px)}
 #desktop #start-menu{width:min(760px,calc(100vw - 12px));min-height:0;max-height:calc(100vh - 44px);overflow:auto}
 #desktop .start-left,#desktop .start-right{min-height:0}
 #desktop #taskbar-windows{min-width:0;overflow-x:auto;scrollbar-width:none}
 #desktop .taskbar-button{min-width:90px;flex-shrink:0}
}