/* === LAYOUT — Sections, containers, grids === */

/* --- Container --- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* --- Section base --- */

.section {
  padding-block: var(--section-py);
  position: relative;
}

.section--full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Texture backgrounds --- */

.bg-dark {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3 {
  color: var(--text-on-dark);
}

.bg-kraft {
  background-color: var(--surface-kraft);
  color: var(--text-on-kraft);
}

.bg-kraft h1,
.bg-kraft h2,
.bg-kraft h3 {
  color: var(--text-on-kraft);
}

.bg-kraft-light {
  background-color: var(--surface-kraft-l);
  color: var(--text-primary);
}

.bg-light {
  background-color: var(--surface-light);
  color: var(--text-primary);
}

.bg-white {
  background-color: var(--surface-white);
  color: var(--text-primary);
}

/* --- Textures (CSS-only) --- */

.texture-bois {
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 40px,
      rgba(107, 66, 38, 0.08) 40px,
      rgba(107, 66, 38, 0.08) 42px
    ),
    repeating-linear-gradient(
      85deg,
      transparent,
      transparent 80px,
      rgba(212, 165, 116, 0.05) 80px,
      rgba(212, 165, 116, 0.05) 81px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

.texture-kraft {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* --- Grids --- */

.grid-essences {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-6);
}

.grid-realisations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--space-8);
}

/* --- Flex utilities --- */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-center {
  text-align: center;
}

/* --- Spacing utilities --- */

.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mt-8  { margin-top: var(--space-8); }

/* === Section dividers — organic SVG waves between sections === */

/*
 * Each divider sits at the bottom of a section, overlapping the next.
 * The SVG curve is encoded inline so we don't add DOM elements.
 * The fill color matches the NEXT section's background.
 */

.section-divider {
  position: relative;
  padding-bottom: calc(var(--section-py) + clamp(40px, 6vw, 80px));
}

.section-divider::after {
  content: '';
  position: absolute;
  bottom: -1px;       /* overlap to prevent subpixel gap */
  left: 0;
  width: 100%;
  height: clamp(40px, 6vw, 80px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 1;
}

/* Hero (dark) → Esquisse (kraft) */
.divider--dark-kraft::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,50 C1260,65 1380,30 1440,40 L1440,80 L0,80Z' fill='%23C4A77D'/%3E%3C/svg%3E");
}

/* Esquisse (kraft) → Essences (light) */
.divider--kraft-light::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C240,70 480,10 720,45 C960,80 1200,20 1440,35 L1440,80 L0,80Z' fill='%23F5F0E8'/%3E%3C/svg%3E");
}

/* Essences (light) → Atelier (kraft-light) */
.divider--light-kraftl::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C360,10 720,70 1080,30 C1260,15 1380,50 1440,45 L1440,80 L0,80Z' fill='%23E8DCC8'/%3E%3C/svg%3E");
}

/* Atelier (kraft-light) → Geste (dark) */
.divider--kraftl-dark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C480,75 960,5 1440,45 L1440,80 L0,80Z' fill='%232C1810'/%3E%3C/svg%3E");
}

/* Geste (dark) → Réalisations (white) */
.divider--dark-white::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,45 C240,10 720,70 1080,25 C1260,10 1380,40 1440,30 L1440,80 L0,80Z' fill='%23FEFCF8'/%3E%3C/svg%3E");
}

/* Réalisations (white) → Contact (kraft) */
.divider--white-kraft::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C360,65 720,15 1080,55 C1260,70 1380,25 1440,40 L1440,80 L0,80Z' fill='%23C4A77D'/%3E%3C/svg%3E");
}

/* Contact (kraft) → Footer (dark) */
.divider--kraft-dark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C480,15 960,65 1440,35 L1440,80 L0,80Z' fill='%232C1810'/%3E%3C/svg%3E");
}