:root{
  --ink:#2B2230;
  --ink-soft:#6B5F5A;
  --paper:#FAF6F0;
  --paper-raised:#F3ECE2;
  --gold:#C9A85C;
  --rose:#B5677A;
  --rule: rgba(43,34,48,0.12);
  --term-bg:#14181C;
  --term-line:#8FE3C5;
  --term-dim:rgba(143,227,197,0.45);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
}

h1{
  margin:0;
}

h2{
  font-family:'Jost', sans-serif;
  font-weight:500;
  letter-spacing:0.01em;
  margin:0;
}

.wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 28px;
}

/* ---------- Hero ---------- */

.hero{
  padding:52px 0 40px;
  text-align:center;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.brand-icon{
  width:64px;
  height:auto;
  opacity:0;
  animation: rise 1.1s ease-out forwards;
}

.brand-word{
  height:clamp(32px, 7vw, 46px);
  width:auto;
  opacity:0;
  animation: rise 1.1s ease-out 0.15s forwards;
}

@keyframes rise{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- Terminal ---------- */

.terminal{
  margin:24px auto 0;
  max-width:460px;
  background:var(--term-bg);
  border-radius:6px;
  text-align:left;
  overflow:hidden;
  opacity:0;
  box-shadow:0 14px 34px -14px rgba(20,24,28,0.55);
  animation: rise 1.1s ease-out 0.25s forwards;
  position:relative;
}

.terminal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

.terminal-bar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(143,227,197,0.15);
}

.terminal-bar .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(143,227,197,0.35);
}

.terminal-bar .terminal-title{
  margin-left:6px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.08em;
  color:var(--term-dim);
  text-transform:uppercase;
}

.terminal-body{
  padding:18px 18px 20px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.92rem;
  color:var(--term-line);
  text-shadow:0 0 8px rgba(143,227,197,0.35);
}

.terminal-body .prompt{
  color:var(--gold);
  margin-right:8px;
}

.terminal-body .type{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  vertical-align:bottom;
  width:0;
  animation: type-in 1.6s steps(33, end) 1s forwards;
}

.terminal-body .cursor{
  display:inline-block;
  margin-left:2px;
  color:var(--gold);
  animation: blink 1s step-end infinite;
}

@keyframes type-in{
  from{ width:0; }
  to{ width:33ch; }
}

@keyframes blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .brand-icon, .brand-word, .terminal{ animation:none; opacity:1; }
  .terminal-body .type{ width:33ch; animation:none; }
  .terminal-body .cursor{ animation:none; }
}

@media (max-width:420px){
  .terminal-body{ font-size:0.72rem; padding:16px 14px 18px; }
}

/* ---------- Sections ---------- */

section{
  padding:56px 0;
  border-top:1px solid var(--rule);
}

section h2{
  font-size:1.55rem;
  margin-bottom:22px;
}

.kicker{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:10px;
}

section > .wrap > p{
  max-width:58ch;
}

.lede{
  color:var(--ink-soft);
  font-size:1.05rem;
}

/* ---------- Réalisation card ---------- */

/* Créations et Origine partagent la même largeur : leurs titres et leurs
   textes sont alignés sur la même marge gauche. Les paragraphes gardent
   leur largeur de lecture (58ch, voir plus haut). */
#realisations .wrap,
#qui-suis-je .wrap{
  max-width:1280px;
}

.creations{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap:12px;
  margin-top:8px;
}

/* Grand écran : 4 colonnes fixes (7 créations = 4 + 3). En dessous,
   la grille se réorganise seule en 3, 2 puis 1 colonne. */
@media (min-width:1240px){
  .creations{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}

.creation{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--paper-raised);
  border-radius:4px;
  padding:24px 24px;
}

.creation > div:last-child{
  display:flex;
  flex-direction:column;
  height:100%;
}

.creation .link{
  margin-top:auto;
  align-self:flex-start;
}

.creation .mark{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel', serif;
  font-size:0.85rem;
  color:var(--gold);
  margin-top:4px;
}

.creation h3{
  font-family:'Jost', sans-serif;
  font-weight:500;
  font-size:1.15rem;
  margin:0 0 8px;
}

.creation p{
  margin:0 0 14px;
  color:var(--ink-soft);
}

.creation .link{
  display:inline-block;
  font-weight:500;
  color:var(--rose);
  text-decoration:none;
  border-bottom:1px solid var(--rose);
  padding-bottom:1px;
}

.creation .link:hover{
  color:var(--gold);
  border-color:var(--gold);
}

.coming-soon{
  margin-top:18px;
  font-size:0.92rem;
  color:var(--ink-soft);
}

/* ---------- Qui suis-je ---------- */

.who p{
  max-width:58ch;
}

.who .signature{
  margin-top:24px;
  font-style:italic;
  color:var(--ink-soft);
}

/* ---------- Footer ---------- */

footer{
  padding:48px 0 64px;
  border-top:1px solid var(--rule);
  text-align:center;
}

footer .contact{
  font-size:1rem;
}

footer .contact a{
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}

footer .socials{
  margin-top:16px;
  display:flex;
  gap:20px;
  justify-content:center;
  font-size:0.9rem;
}

footer .socials a{
  text-decoration:none;
  color:var(--ink-soft);
}

footer .socials a:hover{
  color:var(--rose);
}

footer .motto{
  margin-top:34px;
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold);
}