/* ============ Réalisations — module styles ============
   Reuses the shared design tokens from style.css (CSS variables, fonts,
   .project-tag/.social-link/.section-label already defined there) so this
   module keeps its own layout identity without forking the color system. */

.realisations-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.realisations-filter{
  font-family:"JetBrains Mono", monospace; font-size:.75rem; padding:.45rem .9rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.12); color:var(--slate2); background:transparent; transition:all .2s;
}
.dark .realisations-filter{ border-color:rgba(255,255,255,.15); color:rgba(255,255,255,.6); }
.realisations-filter:hover{ border-color:var(--azure); color:var(--azure); }
.dark .realisations-filter:hover{ border-color:var(--cyan); color:var(--cyan); }
.realisations-filter.is-active{ background:var(--azure); border-color:var(--azure); color:#fff; }
.dark .realisations-filter.is-active{ background:var(--cyan); border-color:var(--cyan); color:#04181c; }

.realisations-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media (min-width:640px){ .realisations-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .realisations-grid{ grid-template-columns:repeat(3,1fr); } }

.realisations-card{
  display:flex; flex-direction:column; border-radius:.9rem; padding:1.4rem;
  transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), border-color .2s;
}
.realisations-card h3{ font-size:1.05rem; }
.realisations-card-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.75rem; }
.realisations-card-date{ font-size:.72rem; color:var(--azure); margin-bottom:.65rem; }
.dark .realisations-card-date{ color:var(--cyan); }
.realisations-card-desc{ font-size:.85rem; line-height:1.55; color:var(--slate2); flex:1; margin-bottom:1rem; }
.dark .realisations-card-desc{ color:rgba(255,255,255,.6); }
.realisations-card-cta{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--azure); }
.dark .realisations-card-cta{ color:var(--cyan); }
.realisations-card:hover .realisations-card-cta{ text-decoration:underline; }

/* Detail view */
.realisations-back{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--slate2);
  margin-bottom:2rem; transition:color .2s;
}
.dark .realisations-back{ color:rgba(255,255,255,.55); }
.realisations-back:hover{ color:var(--azure); }
.dark .realisations-back:hover{ color:var(--cyan); }
.realisations-detail-head{ max-width:48rem; margin-bottom:1.5rem; }
.realisations-draft-notice{
  font-size:.82rem; color:var(--azure-deep); background:rgba(11,95,255,.06); border:1px dashed rgba(11,95,255,.3);
  border-radius:.6rem; padding:.75rem 1rem; max-width:48rem; margin-bottom:2rem;
}
.dark .realisations-draft-notice{ color:var(--cyan); background:rgba(45,212,224,.06); border-color:rgba(45,212,224,.3); }

.realisations-section{ max-width:48rem; margin-bottom:2.25rem; }
.realisations-section h2{
  font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:1.15rem; margin-bottom:.85rem;
  padding-bottom:.6rem; border-bottom:1px solid rgba(0,0,0,.06);
}
.dark .realisations-section h2{ border-bottom-color:rgba(255,255,255,.08); }
.realisations-section p{ font-size:.92rem; line-height:1.7; color:var(--slate2); }
.dark .realisations-section p{ color:rgba(255,255,255,.65); }
.realisations-list{ list-style:none; padding:0; }
.realisations-list li{ position:relative; padding-left:1.1rem; margin-bottom:.5rem; font-size:.92rem; line-height:1.6; color:var(--slate2); }
.dark .realisations-list li{ color:rgba(255,255,255,.65); }
.realisations-list li::before{ content:'—'; position:absolute; left:0; color:var(--azure); }
.dark .realisations-list li::before{ color:var(--cyan); }

.realisations-challenge{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:.7rem; padding:1.1rem 1.25rem; margin-bottom:1rem;
}
.dark .realisations-challenge{ background:var(--anthracite); border-color:rgba(255,255,255,.07); }
.realisations-challenge-label{
  font-family:"JetBrains Mono", monospace; font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--coral,#D85A30); margin-bottom:.3rem;
}
.realisations-challenge-label--solution{ color:var(--azure); margin-top:.85rem; }
.dark .realisations-challenge-label--solution{ color:var(--cyan); }
.realisations-challenge-text{ font-size:.88rem; line-height:1.6; color:var(--slate2); margin:0; }
.dark .realisations-challenge-text{ color:rgba(255,255,255,.65); }

.realisations-private{ font-size:.82rem; color:var(--slate2); font-style:italic; }
.dark .realisations-private{ color:rgba(255,255,255,.5); }

.realisations-end-cta{
  max-width:48rem; margin-top:3rem; padding:2rem; border-radius:1rem;
  background:rgba(11,95,255,.05); border:1px solid rgba(11,95,255,.15); text-align:center;
}
.dark .realisations-end-cta{ background:rgba(45,212,224,.05); border-color:rgba(45,212,224,.18); }
.realisations-end-cta p{
  font-family:"Space Grotesk", sans-serif; font-weight:600; font-size:1.15rem; margin-bottom:1.25rem;
}
.realisations-end-cta-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }