/* ==========================================================================
   jobuilds.dev — mise en page
   --------------------------------------------------------------------------
   Conteneurs, grille 12 colonnes, rythme vertical, ossature de l'en-tête et du
   pied de page. Aucune couleur décorative ici : elle vit dans components.css.
   Chargé après tokens.css, avant components.css.

   Points de rupture (identiques à tokens.css, recopiés : les variables CSS ne
   sont pas utilisables en media query) :
     sm 30rem · md 48rem · lg 60rem · xl 75rem
   ========================================================================== */

/* --------------------------------------------------------------- squelette */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main { flex: 1 0 auto; }

/* -------------------------------------------------------------- conteneurs */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

@media (min-width: 60rem) {
  .container {
    max-width: calc(var(--container) + var(--gutter-lg) * 2);
    padding-inline: var(--gutter-lg);
  }
  .container--wide { max-width: calc(var(--container-wide) + var(--gutter-lg) * 2); }
}

/* ----------------------------------------------------------------- en-tête */

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-start: auto;
}

/* En dessous de lg, la navigation d'ancres et le sélecteur de langue passent
   dans le menu ; ne restent que la bascule de thème et le bouton de contact. */
.site-nav,
.site-header__lang { display: none; }

@media (min-width: 60rem) {
  .site-nav,
  .site-header__lang { display: block; }
  .site-nav { margin-inline-start: var(--sp-8); }
  .menu { display: none; }
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding-block: var(--sp-12) var(--section-y);
}

.hero__grid { display: grid; gap: var(--sp-8); }

.hero__main > * + * { margin-top: var(--sp-5); }

.hero__title { max-width: 20ch; }

@media (min-width: 60rem) {
  .hero { padding-block: var(--sp-20) var(--section-y-lg); }
  .hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .hero__main  { grid-column: 1 / span 7; }
  .hero__aside { grid-column: 9 / -1; margin-top: var(--sp-2); }
}

/* ---------------------------------------------------------------- sections */

.section { padding-block: var(--section-y); }

.section__grid { position: relative; display: grid; gap: var(--sp-6); }

.section__index {
  position: absolute;
  top: calc(-1 * var(--section-y));
  left: var(--gutter);
  transform: translateY(-50%);
  padding-inline-end: var(--sp-3);
}

.section__body > * + * { margin-top: var(--sp-8); }

@media (min-width: 60rem) {
  .section { padding-block: var(--section-y-lg); }

  .section__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: 0;
  }

  .section__index {
    top: calc(-1 * var(--section-y-lg));
    left: var(--gutter-lg);
  }

  /* L'intitulé reste en vue pendant la lecture de la colonne de droite : c'est
     l'asymétrie qui donne le registre « document technique ». */
  .section__head {
    grid-column: 1 / span 3;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-8));
    align-self: start;
  }

  .section__body { grid-column: 4 / -1; }
}

/* ---------------------------------------------------------------- projets */

.projects { display: grid; gap: var(--grid-gap); }

@media (min-width: 48rem) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project--wide { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ stack */

.stack-list { display: grid; gap: 0; }

@media (min-width: 48rem) {
  .stack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

@media (min-width: 60rem) {
  .stack-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- contact */

.contact__grid { display: grid; gap: var(--sp-10); }

.contact__aside > * + * { margin-top: var(--sp-3); }

@media (min-width: 60rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
}

/* Grille interne du formulaire : nom + email côte à côte à partir de md. */
.form { display: grid; gap: var(--sp-5); }

@media (min-width: 48rem) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .field--full { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ pied de page */

.site-footer__grid { display: grid; gap: var(--sp-8); }

@media (min-width: 30rem) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 60rem) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--grid-gap);
  }
  .site-footer__brand { grid-column: auto; }
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  align-items: flex-start;
  justify-content: space-between;
}

/* ----------------------------------------------- pages secondaires, texte */

.page-head { padding-block: var(--sp-12) var(--sp-8); }
.page-head > .container > * + * { margin-top: var(--sp-5); }

@media (min-width: 60rem) {
  .page-head { padding-block: var(--sp-16) var(--sp-10); }
}

.section--plain { padding-top: 0; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 + p { margin-top: var(--sp-3); }
.prose > h2 { margin-top: var(--sp-10); }
.prose > h2:first-child { margin-top: 0; }
.prose__back { margin-top: var(--sp-12); }

/* --------------------------------------------------------------- utilitaires */

.measure { max-width: var(--measure); }

.actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}

@media (min-width: 30rem) {
  .actions { flex-direction: row; align-items: center; gap: var(--sp-4); }
}

/* Champ appât : hors écran plutôt que display:none, pour que les robots qui
   inspectent le style le remplissent quand même. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}