/* ------------------------------------------------------------------
   Variables & couleurs
-------------------------------------------------------------------*/
:root{
  --brand:#ff3b3f;
  --brand-alt:#ff784f;
  --bg:#fff9f5;
  --text:#1e2a38;
  --box-bg:#ffffff;
  --radius:1rem;
  --shadow:0 4px 12px rgba(0,0,0,.07);

  /* inputs */
  --input-bg:#ffffff;
  --input-border:#ccc;
  --placeholder:#888;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#1b1b1d; --text:#f5f5f7; --box-bg:#252527;
    --shadow:0 4px 12px rgba(0,0,0,.55);
    --input-bg:#303032; --input-border:#505050; --placeholder:#a0a0a0;
  }
}

/* ------------------------------------------------------------------
   Reset minimal
-------------------------------------------------------------------*/
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;padding:0;
  display:flex;flex-direction:column;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
}
img{max-width:100%;display:block;border-radius:var(--radius);}
a{text-decoration:none;color:inherit;}
.hidden{display:none;}

/* ------------------------------------------------------------------
   Header
-------------------------------------------------------------------*/
.topbar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.9rem 1.3rem;
  background:var(--box-bg);
  border-bottom:4px solid var(--brand);
  box-shadow:var(--shadow);
  position:sticky;top:0;z-index:10;
}
.topbar h1{font-size:1.4rem;margin:0;color:var(--brand);font-weight:800;}
.topbar nav{display:flex;align-items:center;gap:.8rem;}
.topbar nav a{
  padding:.45rem 1rem;border-radius:var(--radius);
  font-weight:600;background:var(--brand);color:#fff;transition:.25s;
}
.topbar nav a:hover{background:var(--brand-alt);}
/* petit avatar connecté */
.avatar{
  width:34px;height:34px;border-radius:50%;
  object-fit:cover;object-position:center;
  cursor:pointer;transition:transform .2s;
}
.avatar:hover{transform:scale(1.1);}

/* ------------------------------------------------------------------
   Conteneur principal
-------------------------------------------------------------------*/
main{
  max-width:1100px;
  margin-inline:auto;
  padding:1.4rem;
  flex:1 0 auto;   /* pousse footer en bas si contenu court */
}
h2{
  font-size:clamp(1.7rem,4vw,2.3rem);
  margin:.3rem 0 1rem;color:var(--brand-alt);
}

/* ------------------------------------------------------------------
   Grille page accueil (.grid) – cartes verticales classiques
-------------------------------------------------------------------*/
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:1.4rem;
}
.project-card{
  display:flex;flex-direction:column;gap:.7rem;
  background:var(--box-bg);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s;
}
.project-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 20px rgba(0,0,0,.14);
}
.project-card h3{margin:.4rem 1rem 0;font-size:1.2rem;color:var(--text);}
.project-card p{margin:0 1rem 1rem;font-size:.92rem;flex:1;}

/* Badge « certifié » sur la grande image */
.badge-certified{
  position:absolute;top:8px;right:8px;
  background:#34d399;color:#fff;font-size:.75rem;font-weight:700;
  padding:.15rem .45rem;border-radius:.5rem;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}

/* Capsule créateur */
.creator{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,120,79,.12);
  padding:.2rem .6rem;border-radius:9999px;
  font-size:.85rem;font-weight:600;color:var(--brand-alt);
}
.creator img{width:22px;height:22px;border-radius:50%;object-fit:cover;}

/* Tags */
.tag{
  display:inline-block;
  background:rgba(255,120,79,.14);color:var(--brand-alt);
  padding:.18rem .55rem;margin:.3rem;border-radius:.5rem;
  font-size:.75rem;
}

/* Boutons */
.btn{
  display:inline-block;
  background:var(--brand);color:#fff;
  padding:.55rem 1.2rem;border-radius:var(--radius);
  font-weight:600;transition:background .25s;
}
.btn:hover{background:var(--brand-alt);}
.btn.secondary{background:#eef4ff;color:#0066ff;}

/* ------------------------------------------------------------------
   Formulaires
-------------------------------------------------------------------*/
form{
  display:flex;flex-direction:column;gap:1rem;margin-top:1rem;
  background:var(--box-bg);padding:1.5rem;
  border-radius:var(--radius);box-shadow:var(--shadow);
}
label{font-weight:600;font-size:.9rem;margin-bottom:.35rem;display:block;color:var(--text);}
input,textarea,select{
  width:100%;padding:.68rem;
  border:1px solid var(--input-border);border-radius:.7rem;
  font-size:.93rem;background:var(--input-bg);color:var(--text);
}
input::placeholder,textarea::placeholder{color:var(--placeholder);}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);}

/* ------------------------------------------------------------------
   Footer
-------------------------------------------------------------------*/
footer{
  flex-shrink:0;
  background:var(--box-bg);
  border-top:4px solid var(--brand);
  box-shadow:var(--shadow);
  padding:1.2rem;
  text-align:center;
  font-size:.9rem;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
footer a{display:inline-flex;align-items:center;gap:.4rem;color:#7289da;}
footer img{width:24px;height:24px;border-radius:0;}

/* ------------------------------------------------------------------
   PROFIL : grille 4→3→2→1 cartes (.list) + mini-cartes (.card-min)
-------------------------------------------------------------------*/
/* Grille projets profil : 4 → 3 → 2 → 1 colonnes -------------------*/
.list{
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(4,1fr);      /* 4 colonnes desktop */
}
@media (max-width:1100px){.list{grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px) {.list{grid-template-columns:repeat(2,1fr);}  }
@media (max-width:480px) {.list{grid-template-columns:1fr;}           }

.card-min{
  position:relative;background:var(--box-bg);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.card-min img{width:100%;height:90px;object-fit:cover;}
.card-min .meta{display:flex;align-items:center;gap:.4rem;padding:.45rem .6rem;}
.card-min .title{font-size:.9rem;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-min .badge{background:#22c55e;color:#fff;font-size:.7rem;padding:.05rem .4rem;border-radius:.4rem;}
.card-min .overlay{position:absolute;inset:0;}


/* ------------------------------------------------------------------
   Responsive header simplifié
-------------------------------------------------------------------*/
@media(max-width:600px){
  .grid{grid-template-columns:1fr;}
  .topbar nav a{font-size:.9rem;padding:.35rem .8rem;}
}