/* ============================================================
   Benoît Demonchaux — thème Macintosh System 7 (1-bit)
   Chrome en Chicago/pixel ; contenu en Helvetica (lisible).
   ============================================================ */
:root{
  --ink:#000;
  --paper:#fff;
  --chicago:"Chicago","ChiKareGo2","Geneva",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
/* ============================================================
   Bureau sci-fi rétrofuturiste (B&W) + accessoires
   ============================================================ */
html{background:#000;}
body{font-family:var(--body);color:var(--ink);background:#0a0a0a;overflow:auto;}

/* ----- Fond : espace + étoiles scintillantes + grille synthwave ----- */
.space-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0a0a0a;pointer-events:none;}
.space-bg .stars,
.space-bg .stars::before{
  content:"";position:absolute;inset:-50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 35% 70%, #bbb, transparent),
    radial-gradient(1.5px 1.5px at 50% 20%, #fff, transparent),
    radial-gradient(1px 1px at 65% 62%, #ccc, transparent),
    radial-gradient(1.5px 1.5px at 80% 35%, #fff, transparent),
    radial-gradient(1px 1px at 90% 80%, #aaa, transparent),
    radial-gradient(1px 1px at 12% 85%, #fff, transparent),
    radial-gradient(1px 1px at 72% 12%, #ddd, transparent);
  background-repeat:repeat;background-size:33% 33%;
}
.space-bg .stars{animation:twinkle 4s steps(2,end) infinite;}
.space-bg .stars::before{animation:twinkle 6.5s steps(2,end) infinite reverse;opacity:.55;}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.3}}

.space-bg .grid{
  position:absolute;left:-30%;right:-30%;bottom:0;height:46%;
  background-image:
    repeating-linear-gradient(to right, transparent 0 39px, rgba(255,255,255,.55) 39px 40px),
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255,255,255,.55) 39px 40px);
  transform:perspective(280px) rotateX(75deg);transform-origin:bottom center;
  opacity:.15;animation:grid-scroll 3s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000 28%,transparent);
  mask-image:linear-gradient(to top,#000 28%,transparent);
}
@keyframes grid-scroll{from{background-position:0 0,0 0;}to{background-position:0 0,0 40px;}}

/* ============================================================
   Fenêtres accessoires (gizmos sci-fi : fermables + déplaçables)
   Chaque gizmo remplit le corps d'une mini-fenêtre System 7.
   ============================================================ */
.fx-window{position:fixed;z-index:80;width:166px;background:var(--paper);border:2px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.5);}
.fx-window .titlebar{height:22px;cursor:grab;}
.fx-window .titlebar.drag{cursor:grabbing;}
.fx-window .titlebar .title{font-size:13px;}
.fx-body{background:#000;color:#fff;padding:10px;}
.fx-cap{margin-top:8px;font-family:var(--chicago);font-size:10px;letter-spacing:.12em;color:#fff;}
@keyframes spin360{to{transform:rotate(360deg);}}

/* --- Mars : N&B tramé 1-bit + scanlines CRT + HUD --- */
.mars-stage{position:relative;width:100%;aspect-ratio:1/1;border:2px solid #fff;overflow:hidden;background:#000;}
.mars-stage .img{position:absolute;inset:-18%;background:url("img/mars.jpg") center/cover no-repeat;filter:grayscale(1) contrast(1.6) brightness(1.12);animation:globe-spin 26s linear infinite;will-change:transform;}
.mars-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.7) 30%, transparent 33%);background-size:2.5px 2.5px;mix-blend-mode:multiply;opacity:.45;}
.mars-stage::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.5) 2px 3px);}
@keyframes globe-spin{to{transform:rotate(360deg);}}
.mars-hud{font-family:var(--chicago);}
.mars-caution{margin-top:9px;font-size:10px;letter-spacing:.12em;display:flex;align-items:center;gap:6px;animation:blink 1.1s steps(1,end) infinite;}
.mars-caution::before{content:"";width:8px;height:8px;background:#fff;display:inline-block;flex-shrink:0;}
@keyframes blink{50%{opacity:.12;}}
.mars-bar{margin-top:7px;height:10px;border:2px solid #fff;padding:1px;}
.mars-bar i{display:block;height:100%;width:8%;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 5px);animation:scan-fill 5.5s linear infinite;}
@keyframes scan-fill{0%{width:6%;}86%{width:100%;}100%{width:100%;}}
.mars-stat{margin-top:6px;font-family:var(--chicago);font-size:10px;letter-spacing:.1em;}

/* --- Globe wireframe / anneau orbital --- */
.fx-globe,.fx-orbit{position:relative;width:100%;aspect-ratio:1/1;}
.fx-globe svg{width:100%;height:100%;display:block;animation:spin360 18s linear infinite;}
.fx-orbit svg{width:100%;height:100%;display:block;animation:spin360 24s linear infinite;}

/* --- Radar / sonar à balayage --- */
.radar{position:relative;width:100%;aspect-ratio:1/1;}
.radar .dish{position:absolute;inset:0;border-radius:50%;border:1.5px solid #fff;background:repeating-radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(255,255,255,.3) 14% 15%);}
.radar .dish::before,.radar .dish::after{content:"";position:absolute;background:rgba(255,255,255,.3);}
.radar .dish::before{left:0;right:0;top:50%;height:1px;}
.radar .dish::after{top:0;bottom:0;left:50%;width:1px;}
.radar .sweep{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:conic-gradient(from 0deg, rgba(255,255,255,.6), rgba(255,255,255,0) 75deg, transparent);animation:spin360 3.6s linear infinite;}

/* --- Oscilloscope : onde sinusoïdale qui défile --- */
.scope{position:relative;width:100%;height:70px;overflow:hidden;border:1.5px solid rgba(255,255,255,.5);}
.scope svg{position:absolute;top:0;left:0;height:100%;width:200%;animation:wave-scroll 2.2s linear infinite;}
@keyframes wave-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Sonar : ondes concentriques --- */
.ping{position:relative;height:100px;}
.ping span{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:2px solid #fff;border-radius:50%;opacity:0;animation:ping 3s ease-out infinite;}
.ping span:nth-child(2){animation-delay:1s;}
.ping span:nth-child(3){animation-delay:2s;}
.ping::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;border-radius:50%;}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(6);opacity:0}}

/* ============================================================
   Chrome d'écran (non fermable) : brackets + ticker
   ============================================================ */
.scr-bracket{position:fixed;width:26px;height:26px;z-index:2;pointer-events:none;border:2px solid #fff;opacity:.5;animation:bracket-pulse 3s ease-in-out infinite;}
.scr-bracket.tl{top:32px;left:8px;border-right:none;border-bottom:none;}
.scr-bracket.tr{top:32px;right:8px;border-left:none;border-bottom:none;}
.scr-bracket.bl{bottom:30px;left:8px;border-right:none;border-top:none;}
.scr-bracket.br{bottom:30px;right:8px;border-left:none;border-top:none;}
@keyframes bracket-pulse{0%,100%{opacity:.5}50%{opacity:.15}}

.ticker{position:fixed;left:0;right:0;bottom:0;height:22px;z-index:3;background:#000;border-top:2px solid #fff;overflow:hidden;display:flex;align-items:center;}
.ticker .track{white-space:nowrap;color:#fff;font-family:var(--chicago);font-size:11px;letter-spacing:.14em;animation:ticker 26s linear infinite;}
@keyframes ticker{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

@media(prefers-reduced-motion:reduce){
  .space-bg .stars,.space-bg .stars::before,.space-bg .grid,.mars-stage .img,.mars-caution,.mars-bar i,.fx-globe svg,.fx-orbit svg,.radar .sweep,.scope svg,.ping span,.scr-bracket,.ticker .track{animation:none;}
}

/* pixel/chrome */
.px{image-rendering:pixelated;-webkit-font-smoothing:none;font-family:var(--chicago);}

/* ===== Menu bar ===== */
.menubar{
  position:fixed;top:0;left:0;right:0;height:24px;
  background:var(--paper);border-bottom:2px solid var(--ink);
  display:flex;align-items:center;gap:20px;padding:0 14px;z-index:100;
  font-family:var(--chicago);font-size:15px;image-rendering:pixelated;-webkit-font-smoothing:none;
}
.menubar .apple{font-size:16px;}
.menubar .spacer{flex:1;}
.menubar .clock{font-variant-numeric:tabular-nums;}
.menubar .item{cursor:default;}
.menubar .item:hover{background:var(--ink);color:var(--paper);}

/* ===== Bureau / fenetre ===== */
.desk{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:54px 24px 56px;}
.window{
  width:min(840px,100%);background:var(--paper);
  border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(0,0,0,.5);
  animation:zoom .26s cubic-bezier(.2,1.2,.3,1) both;
}
.window.tall{width:min(760px,100%);}
@keyframes zoom{from{transform:scale(.85);opacity:0;}to{transform:scale(1);opacity:1;}}

.titlebar{
  height:26px;border-bottom:2px solid var(--ink);display:flex;align-items:center;position:relative;
  background:repeating-linear-gradient(var(--ink) 0 1px, var(--paper) 1px 3px);
  padding:0 9px;gap:8px;
  font-family:var(--chicago);image-rendering:pixelated;-webkit-font-smoothing:none;
}
.titlebar .closebox,.titlebar .zoombox{width:14px;height:14px;background:var(--paper);border:2px solid var(--ink);cursor:pointer;text-decoration:none;display:block;flex-shrink:0;}
.titlebar .zoombox{position:relative;}
.titlebar .zoombox::before{content:"";position:absolute;top:1px;left:1px;right:1px;height:3px;border-bottom:2px solid var(--ink);}
.titlebar .closebox:active{background:var(--ink);}
.titlebar .title{position:absolute;left:50%;transform:translateX(-50%);background:var(--paper);padding:0 12px;font-size:16px;white-space:nowrap;}

.content{display:flex;position:relative;}
@media(max-width:680px){.content{flex-direction:column;}}
/* Repères HUD aux coins du contenu (cohérence avec les brackets du bureau) */
.content::before,.content::after,.doc::before,.doc::after{content:"";position:absolute;width:13px;height:13px;border:2px solid #000;pointer-events:none;z-index:1;}
.content::before,.doc::before{top:7px;left:7px;border-right:none;border-bottom:none;}
.content::after,.doc::after{bottom:7px;right:7px;border-left:none;border-top:none;}

/* ===== Sidebar (home) ===== */
.aside{width:264px;flex-shrink:0;border-right:2px solid var(--ink);padding:26px 22px;text-align:center;}
@media(max-width:680px){.aside{width:auto;border-right:none;border-bottom:2px solid var(--ink);}}
.avatar{
  position:relative;overflow:hidden;
  width:108px;height:108px;margin:0 auto 16px;border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--chicago);font-size:40px;
  background:repeating-conic-gradient(#000 0% 25%, transparent 0% 50%);background-size:3px 3px;
}
.avatar::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.16) 2px 3px);}
.avatar span{width:72px;height:72px;background:var(--paper);border:2px solid #000;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated;}
.name{font-family:var(--chicago);font-size:21px;margin-bottom:5px;}
.role{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.role::before{content:"[ ";}
.role::after{content:" ]";}
.bio{font-size:14.5px;line-height:1.62;text-align:left;}
hr.sep{border:none;border-top:2px dotted var(--ink);margin:18px 0;}
.contact{list-style:none;text-align:left;}
.contact li{margin:11px 0;font-size:14.5px;display:flex;align-items:center;gap:10px;}
.contact .g{font-family:var(--chicago);width:20px;text-align:center;flex-shrink:0;}
.contact a{color:#000;text-decoration:none;border-bottom:1px solid #000;}
.contact a:hover{background:#000;color:#fff;border-bottom:none;}

/* ===== Main / projets (home) ===== */
.main{flex:1;padding:26px 26px 30px;min-width:0;}
.main h2{font-family:var(--chicago);font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;border-bottom:3px double #000;padding-bottom:8px;display:flex;align-items:baseline;gap:7px;}
.main h2::before{content:"\25B8";}
.main h2::after{content:"//";margin-left:auto;opacity:.5;}
.main h2.more{margin-top:28px;}
.links-list{list-style:none;}
.links-list li{margin:10px 0;font-size:14.5px;display:flex;align-items:center;gap:10px;}
.links-list .g{font-family:var(--chicago);width:18px;text-align:center;flex-shrink:0;}
.links-list a{color:#000;text-decoration:none;border-bottom:1px solid #000;}
.links-list a:hover{background:#000;color:#fff;border-bottom:none;}
.proj{display:flex;gap:16px;border:2px solid #000;padding:18px;margin-bottom:18px;background:var(--paper);}
.proj:hover{box-shadow:4px 4px 0 #000;}
.folder{width:56px;height:46px;flex-shrink:0;border:2px solid #000;position:relative;}
.folder::before{content:"";position:absolute;top:-8px;left:5px;width:24px;height:8px;border:2px solid #000;border-bottom:none;}
.folder .initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--chicago);font-size:22px;}
.proj h3{font-family:var(--chicago);font-size:18px;margin-bottom:6px;}
.proj .meta{font-family:var(--chicago);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px;}
.proj .meta::before{content:"// ";opacity:.5;}
.proj p{font-size:14.5px;line-height:1.6;margin-bottom:14px;}
.proj .actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ===== Boutons ===== */
.btn{font-family:var(--chicago);font-size:12px;letter-spacing:.04em;text-transform:uppercase;background:#fff;border:2px solid #000;border-radius:3px;padding:6px 14px;cursor:pointer;text-decoration:none;color:#000;box-shadow:2px 2px 0 #000;display:inline-block;}
.btn:active{box-shadow:none;transform:translate(2px,2px);}
.btn.primary{background:#000;color:#fff;}
.btn.primary::after{content:" \25B8";}

/* ===== Page projet ===== */
.doc{position:relative;padding:28px 30px 34px;min-width:0;}
.doc-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:2px solid #000;padding-bottom:18px;margin-bottom:20px;}
.doc-hero .folder{width:60px;height:50px;}
.doc-hero .folder .initial{font-size:24px;}
.doc-hero h1{font-family:var(--chicago);font-size:26px;line-height:1;}
.doc-hero .meta{font-family:var(--chicago);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:7px;}
.doc-hero .meta::before{content:"// ";opacity:.5;}
.doc-hero .grow{flex:1;}
@media(max-width:560px){.doc-hero .grow{display:none;}}
.lead{font-size:18px;line-height:1.5;font-weight:600;margin:6px 0 14px;}
.bodytext{font-size:14.5px;line-height:1.65;margin:12px 0;}
.seclabel{font-family:var(--chicago);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:26px 0 14px;border-bottom:3px double #000;padding-bottom:7px;display:flex;align-items:baseline;gap:7px;}
.seclabel::before{content:"\25B8";}
.seclabel::after{content:"//";margin-left:auto;opacity:.5;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid #000;border-right:none;border-bottom:none;margin:12px 0;}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{border-right:2px solid #000;border-bottom:2px solid #000;padding:15px 12px;text-align:center;}
.stat .num{font-family:var(--chicago);font-size:23px;line-height:1;}
.stat .lab{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-top:8px;line-height:1.3;}

.svc{display:grid;grid-template-columns:1fr 1fr;border:2px solid #000;border-right:none;border-bottom:none;}
@media(max-width:560px){.svc{grid-template-columns:1fr;}}
.svc .item{border-right:2px solid #000;border-bottom:2px solid #000;padding:15px;}
.svc .item h4{font-family:var(--chicago);font-size:14px;margin-bottom:5px;}
.svc .item h4::before{content:"\25B8 ";}
.svc .item p{font-size:13.5px;line-height:1.5;}

.clients{display:flex;flex-wrap:wrap;gap:9px;}
.clients .chip{font-family:var(--chicago);font-size:11px;text-transform:uppercase;letter-spacing:.06em;border:2px solid #000;padding:6px 12px;}

.quotebox{position:relative;border:2px solid #000;padding:20px 20px 18px;margin:28px 0 24px;box-shadow:4px 4px 0 #000;}
.quotebox::before{content:"//";position:absolute;top:-11px;left:14px;background:var(--paper);padding:0 6px;font-family:var(--chicago);font-size:13px;}
.quotebox p{font-size:18px;line-height:1.5;}
.quotebox .by{font-family:var(--chicago);font-size:12px;margin-top:11px;}

.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;border-top:2px solid #000;padding-top:22px;}

.switcher{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:200;font-size:12px;background:#fff;border:2px solid #000;padding:5px 12px;}
.switcher a{color:#000;}

/* ===== Scrollbars System 7 ===== */
::-webkit-scrollbar{width:15px;height:15px;}
::-webkit-scrollbar-track{background-color:#fff;background-image:repeating-conic-gradient(#000 0 25%,#fff 0 50%);background-size:2px 2px;border-left:2px solid #000;}
::-webkit-scrollbar-thumb{background:#fff;border:2px solid #000;}
::-webkit-scrollbar-thumb:hover{background:#e8e8e8;}
::-webkit-scrollbar-corner{background:#fff;border-left:2px solid #000;border-top:2px solid #000;}

/* ===== Fenêtre : drag + size-box ===== */
.window{position:relative;z-index:10;}
.titlebar{cursor:grab;}
.titlebar.drag{cursor:grabbing;}
.sizebox{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;background:#fff;border:2px solid #000;overflow:hidden;}
.sizebox::before{content:"";position:absolute;right:1px;bottom:1px;width:9px;height:9px;background:
  repeating-linear-gradient(135deg,#000 0 1px,transparent 1px 3px);}

/* ===== Menu Pomme ===== */
.menubar .apple{cursor:pointer;}
.menubar .apple.active{background:#000;color:#fff;}
.apple-menu{position:fixed;top:24px;left:4px;z-index:130;background:#fff;border:2px solid #000;box-shadow:3px 3px 0 rgba(0,0,0,.5);min-width:222px;display:none;font-family:var(--chicago);font-size:14px;image-rendering:pixelated;-webkit-font-smoothing:none;}
.apple-menu.open{display:block;}
.apple-menu a{display:block;padding:6px 18px;color:#000;text-decoration:none;}
.apple-menu a:hover{background:#000;color:#fff;}
.apple-menu hr{border:none;border-top:2px solid #000;margin:3px 0;}

/* ===== Icônes de bureau ===== */
.dt-icons{position:fixed;top:38px;right:16px;z-index:60;display:flex;flex-direction:column;gap:18px;}
.dt-trash{position:fixed;bottom:42px;right:20px;z-index:60;}
.dt-icon{width:78px;text-align:center;cursor:pointer;user-select:none;}
.dt-icon svg{width:46px;height:46px;display:block;margin:0 auto 4px;}
.dt-label{font-size:12px;display:inline-block;padding:1px 4px;line-height:1.25;color:#000;background:#fff;}
.dt-icon.selected .dt-label{background:#000;color:#fff;}

/* ===== Boîte « À propos » ===== */
.about-dim{position:fixed;inset:0;z-index:140;display:none;}
.about-dim.open{display:block;}
.about-win{position:fixed;z-index:150;top:18%;left:50%;transform:translateX(-50%);width:344px;max-width:92vw;background:#fff;border:2px solid #000;box-shadow:6px 6px 0 rgba(0,0,0,.5);display:none;}
.about-win.open{display:block;}
.about-body{padding:24px 24px 26px;text-align:center;}
.about-logo{font-family:var(--chicago);font-size:42px;line-height:1;margin-bottom:12px;}
.about-body h3{font-family:var(--chicago);font-size:21px;margin-bottom:5px;}
.about-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
.about-mem{border:2px solid #000;text-align:left;font-size:13px;}
.about-mem .row{display:flex;justify-content:space-between;gap:12px;padding:8px 13px;border-bottom:2px dotted #000;}
.about-mem .row:last-child{border-bottom:none;}
.about-mem .row b{font-family:var(--chicago);font-weight:400;}
.about-foot{font-size:11px;margin-top:16px;}

/* ===== Démarrage Happy Mac ===== */
.boot{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  background-color:#b4b4b4;background-image:repeating-conic-gradient(#9c9c9c 0 25%,#c6c6c6 0 50%);background-size:4px 4px;
  transition:opacity .45s ease;}
.boot.hide{opacity:0;pointer-events:none;}
.boot svg{width:88px;height:88px;}
.boot .welcome{font-family:var(--chicago);font-size:15px;background:#fff;border:2px solid #000;padding:7px 18px;image-rendering:pixelated;-webkit-font-smoothing:none;}