/* ==========================================================================
   LAYOUT
   Grille 12 colonnes invisible et conteneurs partagés par toutes les pages.
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--conteneur-max);
  margin-inline: auto;
  padding-inline: var(--conteneur-marge);
}

.grille {
  display: grid;
  grid-template-columns: repeat(var(--grille-colonnes), 1fr);
  column-gap: var(--grille-gouttiere);
}

/* Classes utilitaires de positionnement dans la grille.
   Usage : <div class="grille"><div class="col-start-5 col-span-8">...</div></div>
   Volontairement limitées à ce dont les sections ont besoin, pas un
   système utilitaire exhaustif type framework. */
.col-span-4 { grid-column: span 4; }
.col-span-8 { grid-column: span 8; }
.col-start-5 { grid-column-start: 5; }

section {
  padding-block: var(--espace-xl);
  scroll-margin-top: 5rem;
}

/* Le header est fixe : un lien ou un bouton atteint au clavier (Maj+Tab
   notamment) ne doit pas finir caché dessous. Même valeur que les sections. */
a[href],
button {
  scroll-margin-top: 5rem;
}

/* Pas d'une colonne de la grille (colonne + gouttière), pour décaler par
   une marge les blocs qui ne sont pas eux-mêmes des grilles. Les
   décalages « chaos maîtrisé » ne s'appliquent qu'à partir de 1024 px :
   en dessous, une colonne devient trop étroite pour porter du texte. */
:root {
  --colonne: calc((min(100vw, var(--conteneur-max)) - 2 * var(--conteneur-marge) + var(--grille-gouttiere)) / var(--grille-colonnes));
}

@media (max-width: 767px) {
  section {
    padding-block: var(--espace-l);
  }

  /* Sur mobile, chaque bloc positionné dans la grille desktop repasse
     en pleine largeur : l'asymétrie vient alors de l'ordre et des
     espacements, pas d'un décalage de colonnes qui n'a plus de sens
     sur un écran étroit. */
  .col-span-4,
  .col-span-8 {
    grid-column: span 12;
  }

  .col-start-5 {
    grid-column-start: 1;
  }
}