/* ============================================================
   Atelier by Perry — Layout squelette v3
   Lot 2 étoffera les sections page par page.
   ============================================================ */

/* --- Conteneurs --- */
.v3-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.v3-container--narrow {
  max-width: 760px;
}

.v3-container--wide {
  max-width: 1440px;
}

/* --- Shell principal (wrapper <main>) --- */
.v3-shell {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
}

/* --- Grilles génériques --- */
.v3-grid {
  display: grid;
  gap: 24px;
}

.v3-grid--2 { grid-template-columns: repeat(2, 1fr); }
.v3-grid--3 { grid-template-columns: repeat(3, 1fr); }
.v3-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .v3-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .v3-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .v3-grid--4,
  .v3-grid--3,
  .v3-grid--2 { grid-template-columns: 1fr; }

  .v3-container { padding-inline: 16px; }
}

/* --- Flex utilitaires --- */
.v3-flex        { display: flex; }
.v3-flex-center { display: flex; align-items: center; justify-content: center; }
.v3-flex-between{ display: flex; align-items: center; justify-content: space-between; }
.v3-gap-8       { gap: 8px; }
.v3-gap-16      { gap: 16px; }
.v3-gap-24      { gap: 24px; }

/* --- Espacements --- */
.v3-mt-8  { margin-top: 8px; }
.v3-mt-16 { margin-top: 16px; }
.v3-mt-24 { margin-top: 24px; }
.v3-mt-40 { margin-top: 40px; }

.v3-mb-8  { margin-bottom: 8px; }
.v3-mb-16 { margin-bottom: 16px; }
.v3-mb-24 { margin-bottom: 24px; }
.v3-mb-40 { margin-bottom: 40px; }

/* --- Visibilité --- */
.v3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}