/*
 * layout.css — Conteneur, grilles, responsive
 */

/* ---------------------------------------------------------------
   Conteneur
--------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--sa-container-max);
  margin-inline: auto;
  padding-inline: var(--sa-container-pad);
}

.container--narrow  { max-width: 800px; }
.container--mid     { max-width: 1024px; }
.container--wide    { max-width: 1440px; }

/* ---------------------------------------------------------------
   Sections
--------------------------------------------------------------- */
.section {
  padding-top: var(--sa-space-24);
  padding-bottom: var(--sa-space-24);
}

.section--tight {
  padding-top: var(--sa-space-16);
  padding-bottom: var(--sa-space-16);
}

.section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

.section--alt {
  background-color: var(--sa-bg-alt);
}

.section--dark {
  background-color: var(--sa-ink);
  color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: #fff;
}

@media (max-width: 768px) {
  .section       { padding-top: var(--sa-space-16); padding-bottom: var(--sa-space-16); }
  .section--tight{ padding-top: var(--sa-space-12); padding-bottom: var(--sa-space-12); }
}

/* ---------------------------------------------------------------
   Site wrapper
--------------------------------------------------------------- */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

/* ---------------------------------------------------------------
   Heading de section avec lien en ligne
--------------------------------------------------------------- */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sa-space-6);
  margin-bottom: var(--sa-space-12);
  flex-wrap: wrap;
}
.section-heading h2,
.section-heading h3 {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Grille auto responsive
--------------------------------------------------------------- */
.sa-grid {
  display: grid;
  gap: var(--sa-space-6);
}

/* Auto-fill 3 colonnes */
.sa-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) { .sa-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sa-grid--3 { grid-template-columns: 1fr; } }

/* Auto-fill 4 colonnes */
.sa-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1200px) { .sa-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .sa-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .sa-grid--4 { grid-template-columns: 1fr; } }

/* Auto-fill 2 colonnes */
.sa-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) { .sa-grid--2 { grid-template-columns: 1fr; } }

/* Grille auto-fill responsive (cartes entreprise/avis) */
.sa-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ---------------------------------------------------------------
   Colonnes 2/1 (contenu + sidebar)
--------------------------------------------------------------- */
.sa-cols-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sa-space-10);
  align-items: start;
}
@media (max-width: 1024px) { .sa-cols-2-1 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Layout de la page d'accueil (hero + stats)
--------------------------------------------------------------- */
.sa-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sa-space-4);
}
@media (max-width: 900px)  { .sa-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px)  { .sa-stats-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Grille archive + toolbar
--------------------------------------------------------------- */
.archive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-space-4);
  margin-bottom: var(--sa-space-8);
  flex-wrap: wrap;
}