/* Disposition : conteneur, grille 4 / 12 colonnes, rythme vertical, points de rupture.
   Mobile d'abord (min-width : 480, 768, 1024, 1280, 1440, 1920). */

.conteneur {
  width: 100%;
  max-width: calc(1680px + 2 * var(--marge));
  margin-inline: auto;
  padding-inline: var(--marge);
}

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

@media (min-width: 768px) {
  .grille { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* rythme vertical : une seule règle entre les parties */
.partie, .carnet, .pied { position: relative; }
.partie { margin-top: var(--s-espace-partie); }
.partie__cadre {
  border-top: 1px solid var(--filet-fort);
  padding-top: var(--s-4);
}

/* utilitaires d'espacement (échelle --s-1 à --s-10) */
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* en-tête fixe : le contenu de l'accueil commence sous lui */
main { display: block; }
main:focus { outline: none; }

/* largeur minimale prise en charge : 320 px, aucun défilement horizontal */
html, body { max-width: 100%; }

@media (min-width: 480px) {
  /* grand téléphone : une colonne, tirages un peu plus grands */
}

@media (min-width: 1920px) {
  /* le contenu reste à 1680 px, les marges grandissent (conteneur) */
}

/* écran bas en paysage : l'accueil ne force plus la hauteur */
@media (max-height: 640px) and (orientation: landscape) {
  .accueil { min-height: 0; }
}