/* ==========================================================
   C4RLAZ · Portfolio "bureau Mac"
   ========================================================== */

:root{
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --menu-h: 30px;
  --dock-h: 74px;
  --blue: #2667ff;
  --blue-soft: rgba(38,103,255,.92);
  --win-bg: #f5f5f4;
  --win-border: rgba(0,0,0,.14);
  --ink: #1c1c1e;
  --ease: cubic-bezier(.32,.72,.28,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:var(--font);
  background:#0d0d0d;
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
img{ -webkit-user-drag:none; user-select:none; }
button{ font-family:inherit; background:none; border:0; cursor:pointer; color:inherit; }
a{ color:inherit; }

/* ==========================================================
   INTRO
   ========================================================== */
#intro{
  position:fixed; inset:0; z-index:1000;
  background:#161616;
  overflow:hidden;
  cursor:pointer;
}
.intro-layer{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.intro-bg{ opacity:0; animation:introFade .9s ease .1s forwards; }
.intro-portfolio{ opacity:0; filter:blur(14px); animation:introBlur 1.5s var(--ease) .9s forwards; }
.intro-trait{ opacity:0; transform:translateX(-26px); animation:introSlide 1.3s var(--ease) 1.9s forwards; }
.intro-c4rlaz{ opacity:0; animation:introFade 1.1s ease 2.6s forwards; }
#intro.leaving{ animation:introLeave .85s ease forwards; }
#intro.leaving .intro-layer{ animation-play-state:paused; }
@keyframes introFade{ to{ opacity:1; } }
@keyframes introBlur{ to{ opacity:1; filter:blur(0); } }
@keyframes introSlide{ to{ opacity:1; transform:none; } }
@keyframes introLeave{ to{ opacity:0; visibility:hidden; } }
#intro-skip{
  position:absolute; right:22px; bottom:18px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.45);
  padding:7px 16px; border-radius:999px;
  backdrop-filter:blur(6px);
  background:rgba(0,0,0,.18);
  opacity:0; animation:introFade .8s ease 1.6s forwards;
  transition:background .25s;
}
#intro-skip:hover{ background:rgba(0,0,0,.45); }

/* ==========================================================
   STRUCTURE BUREAU
   ========================================================== */
#desktop-root{ position:fixed; inset:0; }
#desktop-root.booting #desktop .icon{ opacity:0; transform:scale(.92); }
#desktop .icon{ transition:opacity .5s ease, transform .5s var(--ease); }

#wallpaper{ position:absolute; inset:0; z-index:0; }
.wp-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
}
#wallpaper::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(200deg, rgba(20,20,20,.16) 0%, rgba(20,20,20,0) 34%),
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 58%, rgba(10,10,10,.2) 100%);
  pointer-events:none;
}
.wp-dessin{ position:absolute; opacity:.5; mix-blend-mode:multiply; }
.wp-vigne{ left:-40px; bottom:-30px; width:min(24vw,330px); transform:rotate(6deg); }
.wp-etoile{ left:38vw; top:52vh; width:min(9vw,120px); opacity:.42; transform:rotate(-8deg); }

#desktop{
  position:absolute; inset:var(--menu-h) 0 0 0;
  z-index:2;
}

/* ==========================================================
   BARRE DE MENU
   ========================================================== */
#menubar{
  position:absolute; top:0; left:0; right:0; height:var(--menu-h);
  z-index:400;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 12px 0 14px;
  background:rgba(250,250,248,.55);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:13px;
  color:#1b1b1b;
}
.mb-left,.mb-right{ display:flex; align-items:center; gap:14px; min-width:0; }
.mb-apple{ display:flex; transform:rotate(180deg); opacity:.9; }
.mb-logo{ display:flex; align-items:center; }
.mb-c4rlaz{ height:23px; width:auto; }
.mb-menus{ display:flex; gap:14px; opacity:.78; font-size:12.5px; }
.mb-menus span{ cursor:default; }
.mb-right{ gap:11px; }
.mb-ico{ display:flex; opacity:.85; }
.mb-ico:hover{ opacity:1; }
.mb-batt{
  width:23px; height:11px; border:1px solid rgba(0,0,0,.5); border-radius:3px;
  position:relative; display:inline-block;
}
.mb-batt::after{
  content:""; position:absolute; right:-4px; top:2.5px; width:2.5px; height:4px;
  background:rgba(0,0,0,.5); border-radius:0 2px 2px 0;
}
.mb-batt-level{ position:absolute; inset:1.5px; width:74%; background:#1b1b1b; border-radius:1.5px; }
#mb-clock{ white-space:nowrap; font-size:12.5px; }

/* ==========================================================
   ICONES DU BUREAU
   ========================================================== */
.icon{
  position:absolute;
  width:150px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:default;
  touch-action:none;
  z-index:3;
}
.icon:focus-visible{ outline:none; }
.icon.dragging{ z-index:60; }
.icon.dragging .icon-visual{ transform:scale(1.04); }
.icon.drag-denied .icon-visual{ animation:shake .45s ease; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-7px); } 40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); }
}
.icon.drop-target .icon-visual{ transform:scale(1.14); filter:brightness(1.08); }
.icon.vanishing{ transition:opacity .35s, transform .35s; opacity:0 !important; transform:scale(.35) !important; }

/* étiquette type macOS */
.icon-label{
  max-width:150px;
  text-align:center;
  font-size:12.5px; line-height:1.25; font-weight:500;
  color:#fff;
  padding:2px 8px; border-radius:6px;
  text-shadow:0 1px 3px rgba(0,0,0,.65), 0 0 6px rgba(0,0,0,.35);
  word-break:break-word;
}
.icon.selected .icon-label,
.icon:hover .icon-label{
  background:var(--blue-soft);
  text-shadow:none;
}

/* vidéo : vignette + halo + play au survol */
.icon-video .icon-visual{
  position:relative;
  width:132px; aspect-ratio:16/9;
  border-radius:8px;
  transition:transform .22s var(--ease);
}
.icon-video .thumb{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:8px;
  box-shadow:0 5px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  background:#222;
}
.thumb-slate{
  position:absolute; inset:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#1d1d1f 0%,#000 100%);
  box-shadow:0 5px 14px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  color:#f2f2ef;
  font-size:13px; letter-spacing:.22em; font-weight:600;
  border:1px solid rgba(255,255,255,.14);
  text-transform:uppercase;
}
.icon-video .halo{
  position:absolute; inset:-7px;
  border-radius:12px;
  border:3px solid rgba(190,190,195,.0);
  background:rgba(150,150,155,.0);
  transition:all .18s ease;
  pointer-events:none;
}
.icon-video .play{
  position:absolute; left:50%; top:50%;
  width:34px; height:34px;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  background:rgba(20,20,22,.72);
  border:2px solid rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:all .18s ease;
  pointer-events:none;
}
.icon-video .play::after{
  content:""; margin-left:3px;
  border-left:11px solid #fff;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.icon-video:hover .halo,
.icon-video.selected .halo{
  border-color:rgba(200,200,205,.75);
  background:rgba(160,160,165,.14);
}
.icon-video:hover .play,
.icon-video.selected .play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* dossier */
.icon-folder{ width:118px; }
.icon-folder .icon-visual{
  width:96px; height:86px;
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform .22s var(--ease);
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.38));
}
.icon-folder .icon-visual img{ max-width:100%; max-height:100%; }
.icon-folder:hover .icon-visual{ transform:scale(1.05); }
.icon-folder .icon-label{ max-width:126px; }

/* document CV */
.icon-doc{ width:132px; }
.icon-doc .icon-label{ max-width:132px; word-break:normal; overflow-wrap:anywhere; }
.icon-doc .icon-visual{
  position:relative;
  width:74px; height:92px;
  background:#fff;
  border-radius:5px;
  box-shadow:0 5px 12px rgba(0,0,0,.4);
  overflow:hidden;
  transition:transform .22s var(--ease);
}
.icon-doc .icon-visual::after{
  content:""; position:absolute; top:0; right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#d9d9d6 #d9d9d6 rgba(255,255,255,0) rgba(255,255,255,0);
  filter:drop-shadow(-1px 1px 1px rgba(0,0,0,.12));
}
.icon-doc .icon-visual img{
  width:100%; height:100%; object-fit:cover; object-position:top;
}
.icon-doc:hover .icon-visual{ transform:scale(1.05); }

/* enveloppe contacts */
.icon-contacts .icon-visual{
  width:92px;
  transition:transform .22s var(--ease);
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.38));
}
.icon-contacts .icon-visual img{ width:100%; }
.icon-contacts:hover .icon-visual{ transform:scale(1.05); }

/* ==========================================================
   FENETRES
   ========================================================== */
.window{
  position:absolute;
  min-width:300px;
  background:var(--win-bg);
  border-radius:11px;
  border:1px solid var(--win-border);
  box-shadow:0 24px 70px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex; flex-direction:column;
  opacity:0; transform:scale(.92) translateY(10px);
  transition:opacity .24s ease, transform .24s var(--ease);
}
.window.open{ opacity:1; transform:none; }
.window.closing{ opacity:0; transform:scale(.9) translateY(14px); }
.window.zoomed{ left:3vw !important; top:calc(var(--menu-h) + 2vh) !important; width:94vw !important; height:88vh !important; }

.win-titlebar{
  flex:none;
  height:34px;
  display:flex; align-items:center;
  padding:0 12px;
  background:linear-gradient(#eceae8,#e2e0dd);
  border-bottom:1px solid rgba(0,0,0,.1);
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.win-titlebar:active{ cursor:grabbing; }
.win-lights{ display:flex; gap:8px; margin-right:12px; }
.win-lights button{
  width:12px; height:12px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  position:relative;
}
.wl-close{ background:#ff5f57; }
.wl-min{ background:#febc2e; }
.wl-zoom{ background:#28c840; }
.win-lights button::after{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:rgba(0,0,0,.55);
  opacity:0;
}
.wl-close::after{ content:"×"; }
.wl-min::after{ content:"−"; }
.wl-zoom::after{ content:"+"; }
.win-lights:hover button::after{ opacity:1; }
.win-title{
  flex:1;
  text-align:center;
  font-size:12.5px; font-weight:600; color:#4c4c4a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding-right:44px;
}
.win-body{
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* --- fenêtre "information about" vidéo --- */
.vwin{ width:min(520px, 94vw); }
.vwin .win-body{ padding:16px 18px 20px; }
.v-head{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.v-head .v-thumb{
  width:86px; aspect-ratio:16/9; object-fit:cover;
  border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.25);
  background:#111;
}
.v-head .v-thumb-slate{
  width:86px; aspect-ratio:16/9; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#232325,#000);
  color:#eee; font-size:9px; letter-spacing:.18em; font-weight:700;
}
.v-head h2{ font-size:16px; font-weight:700; letter-spacing:-.01em; }
.v-head p{ font-size:12.5px; color:#6d6d6b; margin-top:2px; }
.v-desc{
  background:#ececea;
  border:1px solid rgba(0,0,0,.07);
  border-radius:7px;
  padding:10px 12px;
  font-size:13px; line-height:1.5; color:#3a3a38;
  margin-bottom:13px;
}
.v-details{ font-size:12.5px; color:#4c4c4a; margin-bottom:13px; }
.v-details .v-caret{ font-weight:600; color:#7a7a78; margin-bottom:4px; display:block; }
.v-details dl{ display:grid; grid-template-columns:auto 1fr; gap:3px 14px; padding-left:14px; }
.v-details dt{ color:#8a8a88; }
.v-details dd{ font-weight:500; }
.v-preview-label{ font-size:12.5px; font-weight:600; color:#7a7a78; margin-bottom:7px; display:block; }
.v-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:8px; overflow:hidden; background:#0c0c0c;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
}
.v-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.v-link{
  display:inline-block; margin-top:10px;
  font-size:12.5px; font-weight:600; color:var(--blue);
  text-decoration:none;
}
.v-link:hover{ text-decoration:underline; }

/* --- fenêtre dossier (école / perso / pro) --- */
.fwin{ width:min(600px, 94vw); }
.fwin .win-body{ padding:0 0 8px; }
.f-intro{
  padding:13px 18px;
  font-size:13px; line-height:1.5; color:#4c4c4a;
  background:#ececea;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.f-project{ padding:16px 18px 6px; }
.f-project + .f-project{ border-top:1px solid rgba(0,0,0,.07); }
.f-project h3{ font-size:14.5px; font-weight:700; }
.f-project h3 span{ font-weight:500; color:#8a8a88; font-size:12.5px; margin-left:7px; }
.f-project p{ font-size:12.8px; line-height:1.5; color:#55554f; margin:5px 0 10px; }
.f-embeds{ display:grid; gap:10px; margin-bottom:12px; }
.f-embeds.cols2{ grid-template-columns:1fr 1fr; }
.f-embeds .v-frame.vertical{ aspect-ratio:9/16; }

/* --- projets pro (grille) --- */
.gwin{ width:min(640px, 94vw); }
.g-hint{
  padding:10px 18px;
  font-size:12.5px; color:#6d6d6b;
  background:#ececea;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.g-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px,1fr));
  gap:18px 14px;
  padding:18px;
}
.g-item{
  display:flex; flex-direction:column; gap:6px;
  cursor:default;
  border-radius:8px;
}
.g-item .g-thumb{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:6px; overflow:hidden;
  box-shadow:0 2px 7px rgba(0,0,0,.22);
  background:#161616;
}
.g-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.g-item .g-slate{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,#232325,#000);
  color:#eee; font-size:10.5px; letter-spacing:.2em; font-weight:700;
}
.g-item figcaption{ font-size:12px; line-height:1.3; color:#3a3a38; text-align:center; }
.g-item figcaption b{ display:block; font-weight:600; }
.g-item figcaption span{ color:#8a8a88; }
.g-item:hover .g-thumb{ outline:3px solid rgba(38,103,255,.55); outline-offset:2px; }
.g-item.just-dropped .g-thumb{ animation:pulse .9s ease 2; }
@keyframes pulse{ 50%{ outline:3px solid rgba(38,103,255,.8); outline-offset:3px; } }

/* --- contacts : mini note --- */
.nwin{ width:min(360px, 92vw); background:#fff9e6; }
.nwin .win-titlebar{ background:linear-gradient(#f6ecc9,#f1e4b6); }
.nwin .win-body{ padding:14px 18px 18px; }
.note-title{ font-size:15px; font-weight:700; margin-bottom:9px; }
.note-line{
  display:flex; align-items:center; gap:10px;
  padding:8px 0;
  font-size:13.5px;
  border-bottom:1px solid rgba(0,0,0,.07);
}
.note-line:last-child{ border-bottom:0; }
.note-line a{ color:#1d5dd8; text-decoration:none; font-weight:500; }
.note-line a:hover{ text-decoration:underline; }
.note-emoji{ width:20px; text-align:center; flex:none; }

/* --- notes / compétences (to-do) --- */
.todo-line{
  display:flex; align-items:flex-start; gap:10px;
  padding:7px 0;
  font-size:13.5px; line-height:1.4;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.todo-line:last-child{ border-bottom:0; }
.todo-check{
  flex:none; width:17px; height:17px; margin-top:1px;
  border-radius:50%;
  background:#f7b500;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:800;
}
.todo-sub{ color:#8a8a80; font-size:12px; display:block; }
.note-sec{ font-size:14px; font-weight:700; margin:16px 0 6px; }
.note-sec:first-child{ margin-top:2px; }

/* --- CV --- */
.cvwin{ width:min(460px, 94vw); }
.cvwin .win-body{ padding:0; background:#8e8e8b; }
.cv-tools{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px;
  background:#ececea;
  border-bottom:1px solid rgba(0,0,0,.09);
  font-size:12.5px; color:#55554f;
}
.cv-tools a{
  font-weight:600; color:var(--blue); text-decoration:none;
  padding:4px 11px; border:1px solid rgba(38,103,255,.4); border-radius:6px;
}
.cv-tools a:hover{ background:rgba(38,103,255,.08); }
.cv-img{ display:block; width:100%; height:auto; }

/* --- galerie --- */
.phwin{ width:min(620px, 94vw); }
.ph-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:14px;
}
.ph-grid figure{ position:relative; border-radius:7px; overflow:hidden; cursor:zoom-in; }
.ph-grid img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .3s var(--ease); }
.ph-grid figure:hover img{ transform:scale(1.03); }
.ph-foot{
  padding:4px 16px 15px;
  font-size:12.5px; color:#6d6d6b;
}
.ph-foot a{ color:var(--blue); font-weight:600; text-decoration:none; }
.ph-foot a:hover{ text-decoration:underline; }
#lightbox{
  position:fixed; inset:0; z-index:900;
  background:rgba(8,8,8,.9);
  display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw;
  cursor:zoom-out;
}
#lightbox img{ max-width:100%; max-height:100%; border-radius:6px; box-shadow:0 20px 80px rgba(0,0,0,.6); }

/* --- alerte macOS (mode clair) --- */
.alert-win{
  width:300px;
  border-radius:13px;
  background:rgba(246,246,244,.97);
  backdrop-filter:blur(30px);
}
.alert-win .win-body{
  padding:22px 18px 16px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.alert-icon{ width:78px; height:auto; margin-bottom:14px; }
.alert-title{ font-size:14px; font-weight:700; color:#1c1c1e; }
.alert-text{ font-size:12.5px; color:#4c4c4a; margin-top:6px; }
.alert-ok{
  margin-top:18px;
  width:100%;
  padding:7px 0;
  border-radius:8px;
  background:#3478f6;
  color:#fff;
  font-size:13.5px; font-weight:600;
  transition:filter .15s;
}
.alert-ok:hover{ filter:brightness(1.08); }
.alert-ok:active{ filter:brightness(.92); }

/* ==========================================================
   DOCK
   ========================================================== */
#dock-wrap{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center;
  z-index:300;
  pointer-events:none;
}
#dock{
  pointer-events:auto;
  display:flex; align-items:flex-end; gap:9px;
  padding:8px 12px;
  background:rgba(250,250,248,.42);
  border:1px solid rgba(255,255,255,.35);
  border-radius:20px;
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.dock-app{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  width:46px; height:46px;
  transition:transform .18s var(--ease);
  text-decoration:none;
}
.dock-app:hover{ transform:translateY(-8px) scale(1.18); }
.dock-app.bouncing{ animation:bounce .55s var(--ease) 2; }
@keyframes bounce{ 35%{ transform:translateY(-16px); } 70%{ transform:translateY(0); } }
.dock-app::after{
  content:attr(title);
  position:absolute; bottom:58px; left:50%; transform:translateX(-50%) scale(.9);
  background:rgba(28,28,30,.88);
  color:#fff; font-size:11.5px; white-space:nowrap;
  padding:5px 10px; border-radius:7px;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.dock-app:hover::after{ opacity:1; transform:translateX(-50%) scale(1); }
.dock-sep{ width:1px; height:40px; background:rgba(0,0,0,.18); margin:0 3px; align-self:center; }

.dock-img{
  width:46px; height:46px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.3));
}
.dock-img.dock-trash{ width:44px; height:50px; }

/* ==========================================================
   NOTIFICATIONS
   ========================================================== */
#notifs{
  position:absolute; top:calc(var(--menu-h) + 10px); right:12px;
  z-index:600;
  display:flex; flex-direction:column; gap:9px;
  width:min(330px, 86vw);
  pointer-events:none;
}
.notif{
  display:flex; gap:11px; align-items:center;
  background:rgba(250,250,248,.78);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(0,0,0,.09);
  border-radius:13px;
  padding:11px 13px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateX(24px); opacity:0;
  transition:transform .4s var(--ease), opacity .4s ease;
}
.notif.show{ transform:none; opacity:1; }
.notif-ico{ font-size:20px; flex:none; }
.notif b{ display:block; font-size:12.8px; }
.notif span{ font-size:12.3px; color:#55554f; line-height:1.35; display:block; }

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width:760px){
  :root{ --menu-h: 34px; }
  body{ overflow:hidden; }
  .mb-menus{ display:none; }
  .mb-c4rlaz{ height:12px; }
  #mb-clock{ font-size:12px; }

  .wp-photo{ content:url("../img/wallpaper-mobile.jpg"); }

  #desktop{
    inset:var(--menu-h) 0 0 0;
    overflow-y:auto;
    padding:16px 10px calc(var(--dock-h) + 26px);
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px 6px;
    justify-items:center;
    align-content:start;
  }
  .icon{ position:static; width:100%; max-width:168px; }
  .icon-video .icon-visual{ width:100%; max-width:150px; }
  .icon-folder .icon-visual{ width:82px; height:74px; }
  .icon .play{ opacity:1 !important; transform:translate(-50%,-50%) scale(.85) !important; }

  .window{
    left:2.5vw !important; right:2.5vw !important;
    top:auto !important; bottom:0 !important;
    width:95vw !important;
    max-height:88svh;
    border-radius:14px 14px 0 0;
  }
  .window .win-body{ max-height:calc(88svh - 34px); padding-bottom:18px; }
  #dock-wrap{ transition:transform .32s var(--ease); }
  body.has-window #dock-wrap{ transform:translateY(140%); }
  .f-embeds.cols2{ grid-template-columns:1fr; }
  .g-grid{ grid-template-columns:repeat(2, 1fr); }
  .ph-grid{ grid-template-columns:1fr; }

  #dock{ gap:6px; padding:7px 9px; border-radius:17px; max-width:96vw; overflow-x:auto; }
  .dock-app{ width:40px; height:40px; }
  .dock-img{ width:40px; height:40px; }
  .dock-img.dock-trash{ width:38px; height:44px; }
  .dock-app::after{ display:none; }

  .window.alert-win{
    left:7vw !important; right:7vw !important;
    top:26% !important; bottom:auto !important;
    width:86vw !important;
    border-radius:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}