/* ==========================================================================
   SIMON — PORTFOLIO — one page, bento layout
   Design system : noir profond, cartes nettes, accent violet

   Toute la page tient dans l'écran, sans scroll, sur n'importe quelle
   taille d'écran (mobile, tablette, desktop, grand écran) : la mise en
   page est calculée en fractions de la hauteur/largeur visibles (dvh/vw
   + clamp()) plutôt qu'en tailles fixes. Si une carte contient plus de
   contenu que sa hauteur disponible, elle défile *elle-même* en interne
   (petite scrollbar discrète) — mais la page, elle, ne bouge jamais.
   ========================================================================== */

:root{
  --bg:#08080a;
  --surface:#111114;
  --surface-2:#17171b;
  --text:#f5f5f7;
  --text-dim:rgba(245,245,247,.68);
  --text-faint:rgba(245,245,247,.42);
  --line:rgba(255,255,255,.09);
  --accent:#7c7cf5;
  --accent-2:#a78bfa;
  --accent-soft:rgba(124,124,245,.14);
  --green:#3ddc97;
  --radius-s:12px;
  --radius-m:18px;
  --radius-l:24px;
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1280px;
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{
  background:var(--bg);
  height:100%;
  overflow:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--accent); color:#fff;
  padding:.8rem 1.2rem; border-radius:0 0 10px 0; z-index:999;
}
.skip-link:focus{ left:0; }

/* thin, discreet scrollbars for the few areas allowed to scroll internally */
.scroll-y{
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.scroll-y::-webkit-scrollbar{ width:5px; }
.scroll-y::-webkit-scrollbar-track{ background:transparent; }
.scroll-y::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }

/* ==========================================================================
   TOPBAR
   ========================================================================== */
.topbar{
  flex:0 0 auto;
  max-width:var(--container); width:100%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.6rem,2vh,1.4rem) clamp(1rem,3vw,2rem) clamp(.4rem,1.2vh,.9rem);
}
.logo{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.05rem,2.4vh,1.25rem); }
.logo-dot{ color:var(--accent); }
.topbar-nav{ display:flex; gap:2rem; }
.topbar-nav a{ font-size:.92rem; font-weight:500; color:var(--text-dim); transition:color .2s; }
.topbar-nav a:hover{ color:var(--text); }

.topbar-socials{ display:flex; gap:.6rem; }
.topbar-socials a{
  width:clamp(34px,5vh,40px); height:clamp(34px,5vh,40px); border:1px solid var(--line); border-radius:11px;
  display:flex; align-items:center; justify-content:center; color:var(--text-dim); transition:.2s;
}
.topbar-socials a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

/* ==========================================================================
   BENTO GRID
   ========================================================================== */
main{
  flex:1 1 auto;
  min-height:0;
  max-width:var(--container); width:100%; margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem) clamp(.6rem,1.6vh,1.2rem);
  display:flex;
}

.bento{
  flex:1 1 auto;
  min-height:0; min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  grid-template-areas:
    "profile projects projects stack"
    "profile projects projects contact"
    "profile projects projects contact";
  gap:clamp(.5rem,1.3vh,1.1rem);
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:clamp(.9rem,2.2vh,1.8rem);
  position:relative;
  overflow:hidden;
  min-height:0; min-width:0;
  display:flex;
  flex-direction:column;
  transition:border-color .3s var(--ease);
}

.card-head{ flex:0 0 auto; display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:clamp(.5rem,1.4vh,1.2rem); flex-wrap:wrap; }
.card-head h2{ font-size:clamp(1rem,2.2vh,1.25rem); }
.card-head-sub{ font-size:.8rem; color:var(--text-faint); }

/* ---------- Profil ---------- */
.card-profile{ grid-area:profile; padding:0; }
.profile-photo{ flex:0 1 34%; min-height:0; overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface-2); }
.profile-photo img{ width:100%; height:100%; object-fit:cover; }
.profile-body{
  flex:1 1 auto; min-height:0;
  padding:clamp(.8rem,2vh,1.6rem);
  display:flex; flex-direction:column; gap:clamp(.3rem,1vh,.75rem);
  overflow-y:auto;
}
.profile-status{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:600;
  color:var(--text-dim); width:fit-content;
}
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(61,220,151,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(61,220,151,.55);} 70%{ box-shadow:0 0 0 8px rgba(61,220,151,0);} 100%{ box-shadow:0 0 0 0 rgba(61,220,151,0);} }
.card-profile h1{ flex:0 0 auto; font-size:clamp(1.3rem,3.4vh,2rem); line-height:1; }
.profile-role{ flex:0 0 auto; color:var(--accent); font-weight:600; font-size:clamp(.85rem,1.8vh,1rem); }
.profile-tags{ flex:0 0 auto; list-style:none; display:flex; flex-direction:column; gap:.35rem; margin-top:.2rem; }
.profile-tags li{ font-size:clamp(.72rem,1.5vh,.84rem); color:var(--text-dim); padding-left:1rem; position:relative; }
.profile-tags li::before{ content:''; position:absolute; left:0; top:.5em; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.profile-bottom{
  flex:0 0 auto; margin-top:auto; padding-top:clamp(.5rem,1.2vh,.9rem); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:clamp(.6rem,1.4vh,1rem);
}
.profile-meta{
  display:flex; flex-direction:column; gap:.35rem; font-size:clamp(.72rem,1.4vh,.8rem); color:var(--text-faint);
}
.profile-meta i{ color:var(--accent); width:1.1em; }
.profile-support{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(.35rem,.9vh,.55rem);
  padding-top:clamp(.4rem,1vh,.7rem); border-top:1px dashed var(--line);
}
.profile-support i{ font-size:clamp(1.1rem,2.4vh,1.35rem); color:var(--accent-2); }
.profile-support .support-text{ font-weight:600; font-size:clamp(.76rem,1.5vh,.86rem); }

/* ---------- Projets ---------- */
.card-projects{ grid-area:projects; }
.projects-grid{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  /* Une seule colonne : les captures d'écran de projets sont en format
     paysage, donc des tuiles larges et courtes leur vont bien mieux que
     des colonnes étroites et hautes (qui les recadraient affreusement). */
  display:grid; grid-template-columns:1fr; grid-auto-rows:minmax(0,1fr);
  gap:clamp(.4rem,1vh,.8rem);
  padding-right:.3rem;
}
.project-tile{
  display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden;
  background:var(--surface-2); transition:border-color .3s, transform .3s var(--ease);
}
.project-tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.project-tile-label{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:clamp(.5rem,1.3vh,.8rem) clamp(.65rem,1.4vw,1rem);
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.project-tile-label span:first-child{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(.78rem,1.7vh,1rem); color:var(--text);
}
.project-tile-media{ flex:1 1 auto; min-height:32px; overflow:hidden; background:var(--surface); }
/* object-position par défaut : voir imagePosition dans script.js — chaque
   tuile peut l'ajuster individuellement (surchargé en style inline). */
.project-tile-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.project-status{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; }
.status-on{ background:rgba(61,220,151,.14); color:var(--green); }
.status-open{ background:var(--accent-soft); color:var(--accent); }
.status-off{ background:rgba(255,255,255,.08); color:var(--text-faint); }
.status-soon{ background:rgba(167,139,250,.16); color:var(--accent-2); }

/* ---------- Stack ---------- */
.card-stack{ grid-area:stack; }
.stack-grid{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,1fr);
  gap:clamp(.4rem,1vh,.65rem);
  padding-right:.3rem;
}
.stack-icon{
  border-radius:var(--radius-s); border:1px solid var(--line); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; font-size:clamp(.85rem,1.9vh,1.1rem); color:var(--text-dim);
  transition:color .25s, border-color .25s;
}
.stack-icon:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Contact ---------- */
.card-contact{ grid-area:contact; }
.contact-form{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:clamp(.5rem,1.2vh,.9rem); }
.contact-fields{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr;
  gap:clamp(.5rem,1.2vh,.9rem);
  padding-right:.3rem;
}
.field{ position:relative; }
.field-full{ grid-column:1 / -1; display:flex; flex-direction:column; }
.field input,.field textarea{
  width:100%; padding:clamp(.6rem,1.6vh,.95rem) clamp(.7rem,1.6vh,1rem); border-radius:var(--radius-s); border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font-size:clamp(.85rem,1.7vh,.95rem); font-family:inherit; outline:none; transition:border-color .2s, background .2s;
}
.field textarea{ flex:1 1 auto; resize:none; min-height:44px; }
.field label{ position:absolute; top:clamp(.6rem,1.6vh,.95rem); left:.9rem; font-size:.86rem; color:var(--text-faint); pointer-events:none; transition:.2s; }
.field input:focus,.field textarea:focus{ border-color:var(--accent); }
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  top:-.5rem; left:.8rem; font-size:.68rem; background:var(--surface); padding:0 .4rem; border-radius:6px; color:var(--accent);
}
#submitBtn{ flex:0 0 auto; justify-content:center; position:relative; }
.btn-loader{ display:none; width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color:var(--bg); border-radius:50%; animation:spin .8s linear infinite; }
#submitBtn.loading .btn-text{ display:none; }
#submitBtn.loading .btn-loader{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#form-status{ flex:0 0 auto; font-size:.82rem; font-weight:600; min-height:1.1em; }
#form-status.success{ color:var(--green); }
#form-status.error{ color:#ff6b6b; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:clamp(.55rem,1.5vh,.9rem) clamp(.9rem,2vw,1.4rem); border-radius:999px;
  font-weight:600; font-size:clamp(.8rem,1.6vh,.9rem); cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .2s;
}
.btn-primary{ background:var(--text); color:var(--bg); }
.btn-primary:hover{ box-shadow:0 10px 30px rgba(124,124,245,.3); }
.btn-ghost{ border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); }
.btn-small{ padding:clamp(.45rem,1.2vh,.65rem) clamp(.8rem,1.8vw,1.1rem); }

/* ==========================================================================
   TOAST
   ========================================================================== */
#toast{
  position:fixed; bottom:20px; right:20px; background:var(--text); color:var(--bg); padding:.9rem 1.3rem; border-radius:14px;
  opacity:0; transform:translateY(16px); transition:.35s var(--ease); font-weight:600; z-index:1000;
}
#toast.show{ opacity:1; transform:translateY(0); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  flex:0 0 auto;
  max-width:var(--container); width:100%; margin:0 auto; text-align:center;
  padding:clamp(.3rem,1vh,.7rem) clamp(1rem,3vw,2rem) clamp(.5rem,1.4vh,1rem);
  color:var(--text-faint); font-size:clamp(.7rem,1.4vh,.8rem); display:flex; align-items:center; justify-content:center; gap:.6rem;
}
.footer-dot{ opacity:.4; }
.site-footer a{ color:var(--text-dim); transition:.2s; }
.site-footer a:hover{ color:var(--accent); }

/* ==========================================================================
   RESPONSIVE
   Chaque palier redistribue le poids des lignes de la grille (fr) pour
   donner plus de place aux cartes qui ont le plus de contenu — profil,
   projets et contact — tout en gardant une hauteur totale = 100% de main.
   ========================================================================== */
@media (max-width:1024px){
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:1.1fr 1.1fr 1fr 1fr;
    grid-template-areas:
      "profile projects"
      "profile projects"
      "profile contact"
      "stack   contact";
  }
}
/* ---------- Téléphone : la page redevient une page normale qui défile ----------
   En dessous de 720px, essayer de faire tenir le profil + 3 projets + la
   stack + tout le formulaire de contact sur un seul écran sans AUCUN scroll
   ne laisse presque plus de place pour chaque chose (icônes de stack
   invisibles, images de projet réduites à un filet de 20px...). Sur
   téléphone, une page qui défile normalement — comme n'importe quel site —
   est la meilleure expérience : chaque carte retrouve une hauteur naturelle
   et confortable. La règle "zéro scroll, tient pile dans l'écran" reste
   appliquée telle quelle sur tablette et desktop. */
@media (max-width:720px){
  html,body{ height:auto; overflow:visible; }
  .topbar{ padding:clamp(.5rem,1.6vh,1rem) 1.1rem clamp(.3rem,1vh,.6rem); }
  .topbar-nav{ display:none; }
  main{ flex:none; min-height:0; height:auto; overflow:visible; padding:0 1.1rem 1.4rem; }
  .bento{
    display:flex; flex-direction:column;
    height:auto; min-height:0;
    gap:.9rem;
  }
  .card{ min-height:0; padding:1.1rem; }
  .card-head{ margin-bottom:.9rem; }

  /* profil : hauteur naturelle, plus de recadrage forcé */
  .card-profile{ padding:0; }
  .profile-photo{ flex:none; aspect-ratio:4/5; }
  .profile-body{ flex:none; overflow:visible; padding:1.3rem; }
  .profile-tags li{ font-size:.82rem; }

  /* projets : chaque image en plein format, plus de filet coupé */
  .projects-grid{ overflow:visible; grid-auto-rows:auto; gap:.7rem; }
  .project-tile-media{ flex:none; aspect-ratio:16/9; min-height:0; }

  /* stack : icônes à taille fixe et confortable au doigt */
  .stack-grid{ overflow:visible; grid-template-columns:repeat(4,1fr); grid-auto-rows:auto; gap:.6rem; }
  .stack-icon{ aspect-ratio:1; }

  /* formulaire : champs à taille naturelle, plus de compression */
  .contact-fields{ overflow:visible; grid-template-columns:1fr; grid-template-rows:none; gap:.8rem; }
  .field-full{ display:block; }
  .field textarea{ flex:none; min-height:90px; }
}

/* mark the areas that are allowed to scroll internally as a safety net —
   only kicks in if a card's content genuinely can't fit its allotted space */
.profile-body,.projects-grid,.stack-grid,.contact-fields{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.profile-body::-webkit-scrollbar,.projects-grid::-webkit-scrollbar,.stack-grid::-webkit-scrollbar,.contact-fields::-webkit-scrollbar{ width:5px; }
.profile-body::-webkit-scrollbar-thumb,.projects-grid::-webkit-scrollbar-thumb,.stack-grid::-webkit-scrollbar-thumb,.contact-fields::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}