/* ==========================================================================
   Carnet technologique de Sylvain — feuille de style unique
   Utilisée par : index.html, billet-template.html et tous les billets
   ========================================================================== */

:root{
  --bg-deep:#0F1B1A;
  --bg-alt:#16241F;
  --bg-card:#1B2B25;
  --ink:#E8E2D4;
  --ink-muted:#8FA39A;
  --amber:#C98A3E;
  --sage:#6FA895;
  --line: rgba(232,226,212,0.12);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
}

.font-display{ font-family:'Fraunces', serif; }
.font-mono{ font-family:'IBM Plex Mono', monospace; }

::selection{ background:var(--amber); color:var(--bg-deep); }

a{ color:var(--sage); text-decoration:none; }
a:hover{ color:var(--amber); }

/* ---------- Nav (toutes les pages) ---------- */
.navbar-custom{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.25rem 0;
  background:linear-gradient(to bottom, rgba(15,27,26,0.95), rgba(15,27,26,0.75));
  backdrop-filter: blur(6px);
}
.navbar-custom .brand{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.95rem;
  letter-spacing:0.02em;
  color:var(--ink);
}
.navbar-custom .brand .cursor{
  display:inline-block; width:8px; height:1.1em; background:var(--amber);
  margin-left:2px; animation: blink 1.1s steps(2) infinite; vertical-align:-2px;
}
.nav-links a{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  color:var(--ink-muted);
  margin-left:1.75rem;
  letter-spacing:0.02em;
}
.nav-links a:hover{ color:var(--amber); }

@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Étoiles (fond animé, hero + en-tête de billet) ---------- */
.stars, .stars-2, .stars-3{
  position:absolute; inset:0;
  background-repeat:repeat;
}
.stars{
  background-image:
    radial-gradient(2px 2px at 8% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 42%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 38% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 62%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2.5px 2.5px at 68% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 72%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 88% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 95% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 15% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 32% 88%, rgba(255,255,255,0.75), transparent),
    radial-gradient(2.5px 2.5px at 45% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 60% 92%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 72% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 5% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 92% 88%, #fff, transparent);
  background-size:100% 100%;
}
.stars-2{
  background-image:
    radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 44% 15%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 63% 60%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 82% 35%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 12% 68%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 35% 82%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 58% 20%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 75% 90%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 98% 65%, rgba(255,255,255,0.55), transparent);
  animation: twinkle 4s ease-in-out infinite;
}
.stars-3{
  background-image:
    radial-gradient(1.5px 1.5px at 25% 25%, rgba(201,138,62,0.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 50%, rgba(111,168,149,0.6), transparent),
    radial-gradient(1.5px 1.5px at 85% 20%, rgba(201,138,62,0.55), transparent),
    radial-gradient(1.5px 1.5px at 10% 90%, rgba(111,168,149,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 78%, rgba(201,138,62,0.6), transparent);
  animation: twinkle 6s ease-in-out infinite reverse;
}
@keyframes twinkle{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

/* ---------- Hero (index.html) ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  padding-top:6rem;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(201,138,62,0.10), transparent);
  pointer-events:none;
}
.hero-prompt{
  font-family:'IBM Plex Mono', monospace;
  color:var(--sage);
  font-size:0.95rem;
  letter-spacing:0.02em;
}
.hero-prompt .cursor{
  display:inline-block; width:9px; height:1.05em; background:var(--amber);
  margin-left:3px; animation: blink 1.1s steps(2) infinite; vertical-align:-3px;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 5rem);
  line-height:1.05;
  font-weight:600;
  margin:1.25rem 0 1.5rem;
}
.hero h1 em{
  font-style:italic;
  color:var(--amber);
}
.hero p.lede{
  font-size:1.15rem;
  color:var(--ink-muted);
  max-width:34rem;
  line-height:1.6;
}
.scroll-cue{
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--ink-muted);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  letter-spacing:0.08em;
}
.scroll-cue .line{
  width:1px; height:2.5rem; background:linear-gradient(to bottom, var(--sage), transparent);
  animation: pulse-line 2s ease-in-out infinite;
}
@keyframes pulse-line{ 0%,100%{ opacity:0.3; } 50%{ opacity:1; } }

/* ---------- Section shared (index.html) ---------- */
section{ padding:7rem 0; position:relative; }
.section-alt{ background:var(--bg-alt); }
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--amber);
  letter-spacing:0.03em;
  margin-bottom:1.25rem;
  display:block;
}
.eyebrow::before{ content:"~/"; color:var(--ink-muted); }
h2.section-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
  margin-bottom:1.5rem;
}

.reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- About (index.html) ---------- */
.about-text p{ color:var(--ink-muted); font-size:1.05rem; line-height:1.75; }
.about-text p strong{ color:var(--ink); font-weight:500; }

.stat-block{
  border-left:2px solid var(--line);
  padding-left:1.1rem;
  margin-bottom:1.75rem;
}
.stat-block .stat-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.stat-block .stat-value{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  color:var(--ink);
  margin-top:0.15rem;
}

.tag-pill{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--sage);
  border:1px solid rgba(111,168,149,0.35);
  padding:0.35rem 0.85rem;
  border-radius:999px;
  margin:0 0.5rem 0.5rem 0;
}

/* ---------- Références (references.json) ---------- */
.ref-filtres{
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  margin-bottom:2.5rem;
}
.ref-filtre-btn{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  color:var(--ink-muted);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.45rem 1rem;
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ref-filtre-btn:hover{
  border-color:rgba(201,138,62,0.45);
  color:var(--ink);
}
.ref-filtre-btn.active{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--bg-deep);
}

.ref-titre-lien{
  color:var(--ink);
  display:inline-flex;
  align-items:flex-start;
  gap:0.4rem;
}
.ref-titre-lien:hover{ color:var(--amber); }
.ref-titre-lien i{ font-size:0.75rem; opacity:0.7; margin-top:0.35rem; }

.ref-domaine{ color:var(--sage); }

.ref-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  margin-top:3rem;
}
.ref-nav-btn{
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:var(--bg-card);
  border:1px solid var(--line);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.ref-nav-btn:hover:not(:disabled){
  border-color:rgba(201,138,62,0.5);
  color:var(--amber);
}
.ref-nav-btn:disabled{ opacity:0.35; cursor:default; }
.ref-page-indicateur{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  color:var(--ink-muted);
  min-width:6rem;
  text-align:center;
}

/* ---------- Journal / cartes de billets (index.html) ---------- */
.journal-empty{
  text-align:center;
  padding:2rem 0 1rem;
}
.post-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2rem;
  height:100%;
  transition:transform 0.35s ease, border-color 0.35s ease;
}
.post-card:hover{
  transform:translateY(-6px);
  border-color:rgba(201,138,62,0.4);
}
.post-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--ink-muted);
  letter-spacing:0.03em;
}
.post-card h3{
  font-family:'Fraunces', serif;
  font-size:1.35rem;
  font-weight:600;
  margin:0.85rem 0 0.75rem;
  line-height:1.3;
}
.post-card p{
  color:var(--ink-muted);
  font-size:0.95rem;
  line-height:1.6;
  margin-bottom:1.25rem;
}
.post-card .read-more{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  color:var(--amber);
}
.post-card .read-more i{ transition:transform 0.25s ease; display:inline-block; }
.post-card:hover .read-more i{ transform:translateX(4px); }

/* ---------- Contact / Footer (index.html) ---------- */
.contact-section{
  text-align:center;
}
.contact-section h2{
  font-family:'Fraunces', serif;
  font-size:clamp(2rem, 4vw, 3.25rem);
  font-weight:600;
  margin-bottom:1.5rem;
}
.contact-email{
  font-family:'IBM Plex Mono', monospace;
  font-size:1.15rem;
  color:var(--amber);
  border-bottom:1px dashed rgba(201,138,62,0.4);
  padding-bottom:2px;
}

/* ---------- Formulaire de contact ---------- */
.contact-form{
  max-width:36rem;
  margin:2.5rem auto 1.5rem;
  text-align:left;
}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
.form-row{
  display:flex; gap:1.25rem;
}
.form-row .form-group{ flex:1; }
.form-group{ margin-bottom:1.25rem; }
.form-group label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--ink-muted);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:0.5rem;
}
.form-group input,
.form-group textarea{
  width:100%;
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.75rem 1rem;
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  resize:vertical;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:2px solid var(--amber);
  outline-offset:1px;
  border-color:var(--amber);
}
.form-group input::placeholder,
.form-group textarea::placeholder{ color:var(--ink-muted); }

.form-submit{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.9rem;
  color:var(--bg-deep);
  background:var(--amber);
  border:none;
  border-radius:999px;
  padding:0.85rem 1.75rem;
  cursor:pointer;
  transition:opacity 0.25s ease, transform 0.2s ease;
}
.form-submit:hover{ opacity:0.85; }
.form-submit:active{ transform:translateY(1px); }
.form-submit:disabled{ opacity:0.6; cursor:default; }
.form-submit:focus-visible{ outline:2px solid var(--sage); outline-offset:2px; }

.form-status{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  margin-top:1rem;
  min-height:1.2em;
}
.form-status--ok{ color:var(--sage); }
.form-status--error{ color:#D97757; }

.contact-reveal--secondary{
  display:block;
  margin:0 auto;
  background:none;
  border:none;
  padding:0.5rem;
  color:var(--ink-muted);
  font-size:0.85rem;
  text-decoration:underline;
  text-decoration-style:dashed;
  text-underline-offset:4px;
}
.contact-reveal--secondary:hover{ color:var(--amber); }
.contact-reveal{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.95rem;
  color:var(--ink);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:999px;
  padding:0.75rem 1.5rem;
  cursor:pointer;
  transition:border-color 0.25s ease, color 0.25s ease;
}
.contact-reveal:hover{
  border-color:rgba(201,138,62,0.5);
  color:var(--amber);
}
.contact-email-wrap{
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
}
.copy-btn{
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink-muted);
  padding:0.4rem 0.6rem;
  cursor:pointer;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.copy-btn:hover{
  color:var(--amber);
  border-color:rgba(201,138,62,0.4);
}
.social-links{
  margin-top:2.5rem;
  display:flex; justify-content:center; gap:1.75rem;
}
.social-links a{
  color:var(--ink-muted);
  font-size:1.3rem;
  transition:color 0.25s ease, transform 0.25s ease;
}
.social-links a:hover{ color:var(--amber); transform:translateY(-3px); }

footer{
  padding:2.5rem 0;
  text-align:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--ink-muted);
  border-top:1px solid var(--line);
}

/* ---------- En-tête de billet (billet-template.html + billets) ---------- */
.article-header{
  padding:9rem 0 4rem;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.back-link{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  color:var(--ink-muted);
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-bottom:2rem;
}
.back-link:hover{ color:var(--amber); }

.post-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--amber);
  letter-spacing:0.03em;
  display:block;
  margin-bottom:1rem;
}
.post-eyebrow::before{ content:"~/journal/"; color:var(--ink-muted); }

.article-header h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:clamp(2rem, 5vw, 3.4rem);
  line-height:1.15;
  max-width:44rem;
  margin-bottom:1.75rem;
}

.post-meta-row{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  color:var(--ink-muted);
}
.post-meta-row .tag-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--sage);
  border:1px solid rgba(111,168,149,0.35);
  padding:0.3rem 0.75rem;
  border-radius:999px;
}

/* ---------- Corps de billet / typographie longue ---------- */
.article-body{ padding:4.5rem 0 6rem; }
.prose{
  max-width:42rem;
  margin:0 auto;
  font-size:1.08rem;
  line-height:1.85;
  color:#D9D3C4;
}
.prose p{ margin-bottom:1.6rem; }
.prose h2{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.65rem;
  color:var(--ink);
  margin:3rem 0 1.25rem;
}
.prose h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.3rem;
  color:var(--ink);
  margin:2.25rem 0 1rem;
}
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ border-bottom:1px dashed rgba(111,168,149,0.4); }
.prose ul, .prose ol{ margin-bottom:1.6rem; padding-left:1.4rem; }
.prose li{ margin-bottom:0.5rem; }

.prose blockquote{
  border-left:2px solid var(--amber);
  padding:0.25rem 0 0.25rem 1.5rem;
  margin:2.25rem 0;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink);
}

.prose pre{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.25rem 1.5rem;
  overflow-x:auto;
  margin:2rem 0;
}
.prose code{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--sage);
}
.prose p code{
  background:var(--bg-card);
  padding:0.15rem 0.4rem;
  border-radius:3px;
}

.prose hr{
  border:none;
  border-top:1px solid var(--line);
  margin:3rem 0;
}

.prose figure{ margin:2.5rem 0; }
.prose figure img{
  width:100%; border-radius:6px; border:1px solid var(--line);
}
.prose figcaption{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--ink-muted);
  margin-top:0.75rem;
  text-align:center;
}

/* ---------- Bloc auteur (billets) ---------- */
.author-box{
  max-width:42rem;
  margin:4rem auto 0;
  padding-top:2.5rem;
  border-top:1px solid var(--line);
  display:flex; gap:1.25rem; align-items:flex-start;
}
.author-box .avatar{
  width:52px; height:52px; border-radius:50%;
  background:var(--bg-card);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:1.2rem; color:var(--amber);
  flex-shrink:0;
}
.author-box .author-name{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--ink);
}
.author-box .author-bio{
  font-size:0.92rem;
  color:var(--ink-muted);
  margin-top:0.35rem;
  line-height:1.6;
}

/* ---------- Navigation précédent / suivant (billets) ---------- */
.post-nav{
  max-width:42rem;
  margin:3rem auto 0;
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.82rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.post-nav a{ color:var(--ink-muted); }
.post-nav a:hover{ color:var(--amber); }

/* ---------- Page 404 ---------- */
.hero--404{ min-height:90vh; }

.error-console{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  color:var(--ink-muted);
  background:var(--bg-card);
  border:1px solid var(--line);
  border-left:2px solid var(--amber);
  border-radius:6px;
  padding:1rem 1.25rem;
  margin:1.5rem 0 2rem;
  max-width:38rem;
}
.error-console-line{ line-height:1.7; }
.error-console-line::before{ content:"› "; color:var(--amber); }

.error-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.5rem;
  margin-top:2rem;
}
.error-actions .form-submit{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  text-decoration:none;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px){
  .nav-links{ display:none; }
  section{ padding:4.5rem 0; }
  .article-header{ padding:8rem 0 3rem; }
}