/*
 * CSS de mise en page du site.
 * Le design system (tokens.css + components.css) gère l'apparence des
 * composants ds-*. Ce fichier ne traite que la STRUCTURE de page : réinitialisation
 * minimale, conteneur, grilles, espacements de sections. Toutes les valeurs
 * thématisables passent par les variables CSS du design system (var(--token)).
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-surface, #ffffff);
  color: var(--color-text-primary, #0f1a13);
  font-family: var(
    --typography-body-font-family,
    'JetBrains Mono',
    ui-monospace,
    monospace
  );
  font-size: var(--typography-body-font-size, 15px);
  font-weight: var(--typography-body-font-weight, 400);
  line-height: var(--typography-body-line-height, 1.6);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a {
  color: var(--color-accent, #15803d);
}

/* Lien d'évitement pour l'accessibilité clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent, #15803d);
  color: #fff;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  z-index: 1000;
  border-radius: 0 0 var(--radius-container, 8px) 0;
}
.skip-link:focus {
  left: 0;
}

/* Conteneur centré */
.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--space-4, 16px);
}

/* En-tête collant contenant la navbar du design system */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(
    in srgb,
    var(--color-surface, #ffffff) 92%,
    transparent
  );
  backdrop-filter: blur(8px);
  border-bottom: var(--border-width, 1px) solid
    var(--color-gray-100, #e7ede3);
}
.site-header .ds-navbar {
  max-width: 960px;
  margin-inline: auto;
}

/* Espacement vertical des sections */
.section {
  padding-block: calc(var(--space-6, 24px) * 2);
}
.section + .section {
  border-top: var(--border-width, 1px) solid var(--color-gray-100, #e7ede3);
}

.section__title {
  font-family: var(--typography-heading-font-family);
  font-size: var(--typography-heading-font-size, 24px);
  font-weight: var(--typography-heading-font-weight, 700);
  line-height: var(--typography-heading-line-height, 1.3);
  margin: 0 0 var(--space-6, 24px);
  color: var(--color-text-primary);
}
.section__title::before {
  content: '// ';
  color: var(--color-accent, #15803d);
}

.section__lead {
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--space-6, 24px);
}

/* Hero : espacements */
.hero-wrap {
  padding-block: calc(var(--space-6, 24px) * 2.5);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-6, 24px);
}

/* Grille de cartes génériques */
.grid {
  display: grid;
  gap: var(--space-6, 24px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Frise des expériences / formations */
.timeline {
  display: grid;
  gap: var(--space-6, 24px);
}
.timeline__item {
  display: grid;
  gap: var(--space-2, 8px);
}
.timeline__meta {
  font-family: var(--typography-mono-font-family);
  font-size: var(--typography-mono-font-size, 14px);
  color: var(--color-text-secondary);
}
.timeline__role {
  font-weight: 700;
  margin: 0;
}
.timeline__list {
  margin: var(--space-2, 8px) 0 0;
  padding-left: 1.1em;
  color: var(--color-text-secondary);
}
.timeline__list li {
  margin-bottom: var(--space-2, 8px);
}

/* Groupes de compétences */
.skills {
  display: grid;
  gap: var(--space-6, 24px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.skills__group-title {
  font-weight: 700;
  margin: 0 0 var(--space-2, 8px);
}
.skills__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

/* Formulaire de contact */
.contact-form {
  display: grid;
  gap: var(--space-4, 16px);
  max-width: 560px;
}
.contact-form label {
  display: grid;
  gap: var(--space-2, 8px);
  font-size: var(--typography-mono-font-size, 14px);
  color: var(--color-text-secondary);
}
.contact-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
}
.contact-aside {
  margin-top: var(--space-6, 24px);
  color: var(--color-text-secondary);
  font-size: var(--typography-mono-font-size, 14px);
}
.contact-aside a {
  color: var(--color-accent);
}

/* Bascule de thème : réutilise ds-icon-button */
.theme-toggle {
  margin-left: var(--space-2, 8px);
}

/* Visuellement masqué mais accessible aux lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Correctifs d'alignement                                             */
/* Le design system reste intact ; on ajuste uniquement la mise en     */
/* page au niveau du site.                                             */
/* ------------------------------------------------------------------ */

/* Hero : bouton (avec padding) et lien texte doivent s'aligner sur la
   même ligne, centrés verticalement. */
.ds-hero__actions {
  align-items: center;
}
/* Harmonise la hauteur du lien avec celle du bouton et centre le texte. */
.ds-hero__actions .ds-button,
.ds-hero__actions .ds-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  line-height: 1.2;
}

/* Project-cards : aligner tags + lien en bas de carte pour une grille
   régulière quelle que soit la longueur de la description. */
.ds-project-card {
  height: 100%;
}
.ds-project-card__tags {
  margin-top: auto;
}
.ds-project-card .ds-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2, 8px);
}

/* Formulaire de contact : bouton et éventuel texte sur une ligne centrée. */
.contact-form__actions .ds-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
}

/* Cartes d'expérience : badges alignés en bas. */
.timeline__item .skills__tags {
  margin-top: var(--space-2, 8px);
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-6, 24px);
  }
  /* Sur mobile, empiler les actions du hero pleine largeur. */
  .ds-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .ds-hero__actions .ds-button,
  .ds-hero__actions .ds-link {
    justify-content: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------------ */
/* Messages de feedback du formulaire (Formspree AJAX)                 */
/* ------------------------------------------------------------------ */
.form-success {
  margin: 0;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-container, 8px);
  background-color: color-mix(
    in srgb,
    var(--color-accent, #15803d) 14%,
    transparent
  );
  color: var(--color-accent, #15803d);
  font-weight: 700;
}

.form-error {
  display: block;
  margin-top: var(--space-2, 8px);
  color: var(--color-accent-secondary, #b45309);
  font-size: var(--typography-mono-font-size, 14px);
}
.form-error--global {
  margin: 0;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-container, 8px);
  background-color: color-mix(
    in srgb,
    var(--color-accent-secondary, #b45309) 12%,
    transparent
  );
  font-weight: 700;
}

/* Champ invalide signalé par aria-invalid (posé par @formspree/ajax). */
.ds-input[aria-invalid='true'],
.ds-textarea[aria-invalid='true'] {
  border-color: var(--color-accent-secondary, #b45309);
  outline-color: var(--color-accent-secondary, #b45309);
}