/* =========================================================================
   SECTIONS — mise en page spécifique
   ========================================================================= */

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

.hero {
  position: relative;
  z-index: var(--z-content);
  padding-top: clamp(7rem, 12vh + 4rem, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 1060px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: var(--sp-8);
  }
}

.hero__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--ls-hero);
  color: var(--text-hi);
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.js .hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 900ms var(--ease-out) forwards;
}

.js .hero__title .line:nth-child(1) > span { animation-delay: 120ms; }
.js .hero__title .line:nth-child(2) > span { animation-delay: 220ms; }
.js .hero__title .line:nth-child(3) > span { animation-delay: 320ms; }

.hero__lead {
  margin-top: var(--sp-5);
  max-width: 58ch;
  font-size: var(--fs-lead);
  line-height: 1.66;
  color: var(--text-mid);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
}

.hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--hairline-soft);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-low);
}

.hero__fact b {
  color: var(--accent-soft);
  font-weight: 600;
}

.hero__clock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
}

.hero__clock .dot {
  color: var(--accent-2);
  width: 6px;
  height: 6px;
}

.hero__clock time {
  color: var(--text-hi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Bloc CLI */
.cli {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  background: var(--surface-inset);
  max-width: 100%;
  overflow: hidden;
}

.cli__prompt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-hi);
  min-width: 0;
}

.cli__prompt .chev {
  color: var(--accent);
  font-weight: 700;
}

.cli__cmd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-mid);
}

.cli__cmd .flag {
  color: var(--accent-3-soft);
}

.cli__cmd .path {
  color: var(--accent-2-soft);
}

/* Panneau code du hero */
.hero__panel {
  position: relative;
}

.hero__panel .window {
  transition: transform var(--t-slow) var(--ease-out);
}

.hero__panel:hover .window {
  transform: translateY(-4px) rotateX(1.5deg);
}

.hero__panel-glow {
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  animation: breathe 7s var(--ease-in-out) infinite;
}

.hero__hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}

.keycap {
  padding: 0.1em 0.4em;
  border: 1px solid var(--hairline-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  font-size: 0.68rem;
  color: var(--text-low);
}

/* ---------------------------- Activité GitHub ---------------------------- */

.activity {
  padding: var(--sp-6);
  overflow: hidden;
}

.activity__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--hairline-soft);
}

.activity__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-top: var(--sp-5);
}

@media (min-width: 900px) {
  .activity__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-7);
  }
}

.activity__heatmap {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.activity__heatmap::-webkit-scrollbar {
  display: none;
}

.heat-cell {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  background: var(--hairline-soft);
  transition: transform var(--t-base) var(--ease-spring), background-color var(--t-base) var(--ease-out);
}

.heat-cell:hover {
  transform: scale(1.35);
}

.heat-cell--1 { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.heat-cell--2 { background: color-mix(in srgb, var(--accent) 48%, transparent); }
.heat-cell--3 { background: color-mix(in srgb, var(--accent) 74%, transparent); }
.heat-cell--4 {
  background: var(--accent);
  box-shadow: 0 0 10px -1px var(--accent-glow);
}

.activity__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  list-style: none;
}

.activity__metrics li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.activity__metrics b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  line-height: 1;
}

.activity__metrics span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

.activity__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.activity__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.lang-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline-soft);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--text-low);
}

/* ---------------------------- Parcours ---------------------------- */

.parcours-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  .parcours-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--sp-7);
  }
}

.parcours-aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .parcours-aside {
    position: sticky;
    top: 6rem;
  }
}

.panel--accent {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    linear-gradient(160deg, var(--accent-tint) 0%, transparent 55%),
    var(--surface-1);
}

.aside-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.aside-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.aside-item__icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--r-xs);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.85em;
}

.aside-item b {
  display: block;
  font-weight: 550;
  color: var(--text-hi);
  line-height: 1.4;
}

.aside-item em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-faint);
  margin-top: 0.15rem;
}

.aside-note {
  font-size: var(--fs-xs);
  line-height: 1.68;
  color: var(--text-low);
}

/* ---------------------------- À propos ---------------------------- */

.about {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.about__prose p + p {
  margin-top: var(--sp-4);
}

.about__prose p {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--text-mid);
}

.principles-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.principle-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out);
}

.principle-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--surface-2);
}

.principle-card__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--accent-tint);
  color: var(--accent);
}

.principle-card b {
  font-size: 0.95rem;
  color: var(--text-hi);
}

.principle-card p {
  font-size: var(--fs-xs);
  line-height: 1.62;
  color: var(--text-low);
}

/* ---------------------------- Contact ---------------------------- */

.contact-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-7);
  }
}

.contact-panel {
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  backdrop-filter: var(--blur-heavy);
  -webkit-backdrop-filter: var(--blur-heavy);
  box-shadow: var(--sh-3);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.contact-form__row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .contact-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.contact-terminal {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-inset);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.contact-terminal__cmd {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-mid);
  word-break: break-word;
}

.contact-terminal__cmd .chev {
  color: var(--accent-2);
  font-weight: 700;
}

.contact-terminal__cmd b {
  color: var(--accent);
  font-weight: 600;
}

/* ---------------------------- Écriture / blog ---------------------------- */

.writing-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}

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

.site-footer {
  position: relative;
  z-index: var(--z-content);
  margin-top: var(--sp-9);
  border-top: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
}

@media (min-width: 860px) {
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.site-footer__brand p {
  margin-top: var(--sp-3);
  max-width: 44ch;
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
}

@media (min-width: 860px) {
  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-nav a {
  color: var(--text-low);
  transition: color var(--t-base) var(--ease-out);
}

.footer-nav a:hover {
  color: var(--accent);
}

/* ---------------------------- Grille utilitaire de section ---------------------------- */

.section--alt {
  position: relative;
}

.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--surface-solid) 45%, transparent), transparent);
  pointer-events: none;
}