/**
 * @file 03-layout.css
 * @project Nails-Manucure-v1
 * @description Layout fluide 320px → 4K : conteneurs, sections, grilles.
 * @version 2.0.0
 * @updated 2026-07-18
 */

/* ═══ SECTIONS FLUIDES ═══ */
.section { padding: var(--sp-section) 16px; }
.section-sm { padding: var(--sp-block) 16px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1100px) { .container { padding: 0; } }

/* ═══ HEADINGS ═══ */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--berry);
  margin-bottom: clamp(8px, 1vw, 18px);
}
.label::before { content: ''; display: block; width: 20px; height: 1px; background: var(--berry); }
.label::after { content: ''; display: block; width: 20px; height: 1px; background: var(--berry); }

.heading {
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  color: var(--plum);
}
.heading em { font-style: italic; color: var(--berry); }
.heading-light { color: var(--ivory); }
.heading-light em { color: var(--rose-light); }