/* =============================================================
   layout.css — grid, containers, helpers asymétriques
   Logique magazine : 12 colonnes utilisées librement, pas comme une grille rigide.
   ============================================================= */

/* ----------------------- Container principal ----------------------- */
.container {
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container-prose {
  width: 100%;
  max-width: calc(var(--max-prose) + 2 * var(--pad-x));
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ----------------------- Bleed (image plein cadre) ----------------------- */
.layout-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50vw);
}

/* ----------------------- Grille 12 colonnes magazine ----------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .grid { gap: var(--space-5); }
}

@media (min-width: 1180px) {
  .grid { gap: var(--space-6); }
}

/* Helpers col-span (mobile = pleine largeur, desktop = asymétrie) */
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 12; }
.col-4  { grid-column: span 12; }
.col-8  { grid-column: span 12; }
.col-3  { grid-column: span 12; }
.col-9  { grid-column: span 12; }
.col-7  { grid-column: span 12; }
.col-5  { grid-column: span 12; }

@media (min-width: 720px) {
  .col-md-6 { grid-column: span 6; }
  .col-md-4 { grid-column: span 4; }
  .col-md-8 { grid-column: span 8; }
  .col-md-3 { grid-column: span 3; }
  .col-md-9 { grid-column: span 9; }
  .col-md-12 { grid-column: span 12; }
}

@media (min-width: 1180px) {
  .col-lg-6  { grid-column: span 6; }
  .col-lg-4  { grid-column: span 4; }
  .col-lg-8  { grid-column: span 8; }
  .col-lg-3  { grid-column: span 3; }
  .col-lg-9  { grid-column: span 9; }
  .col-lg-5  { grid-column: span 5; }
  .col-lg-7  { grid-column: span 7; }
  .col-lg-2  { grid-column: span 2; }
  .col-lg-10 { grid-column: span 10; }

  /* Positionnement explicite pour asymétrie magazine */
  .col-lg-start-2 { grid-column-start: 2; }
  .col-lg-start-3 { grid-column-start: 3; }
  .col-lg-start-4 { grid-column-start: 4; }
  .col-lg-start-5 { grid-column-start: 5; }
  .col-lg-start-6 { grid-column-start: 6; }
  .col-lg-start-7 { grid-column-start: 7; }
}

/* ----------------------- Sections (rythme vertical) ----------------------- */
.section {
  padding-block: var(--rhythm-section);
}

.section-tight   { padding-block: var(--rhythm-block); }
.section-loose   { padding-block: calc(var(--rhythm-section) * 1.4); }
.section-no-top  { padding-top: 0; }
.section-no-bot  { padding-bottom: 0; }

.section + .section { padding-top: 0; }

.section-paper-deep {
  background: var(--paper-deep);
}

.section-ink {
  background: var(--ink);
  color: var(--paper);
}
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 {
  color: var(--paper);
}
.section-ink a { color: var(--paper); text-decoration-color: var(--paper-60); }
.section-ink a:hover { text-decoration-color: var(--paper); }

/* ----------------------- Layout helpers asymétriques ----------------------- */

/* Bloc narrow centré (manifesto, intro) */
.layout-narrow {
  max-width: var(--max-prose);
  margin-inline: auto;
}

/* Bloc narrow décalé à gauche (citation éditoriale) */
.layout-narrow-left {
  max-width: var(--max-prose-narrow);
  margin-left: 0;
}

/* Bloc narrow décalé à droite */
.layout-narrow-right {
  max-width: var(--max-prose-narrow);
  margin-left: auto;
  margin-right: 0;
}

/* Aside layout : texte gauche, photo/aside droite (alternés) */
.layout-aside-right {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.layout-aside-left {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 1180px) {
  .layout-aside-right {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-7);
  }
  .layout-aside-left {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-7);
  }
  .layout-aside-left > .aside-media {
    order: -1;
  }
}

/* Stack vertical avec rythme constant */
.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-xl > * + * { margin-top: var(--rhythm-block); }

/* Cluster horizontal (groupes inline-flex avec wrap) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Even-cols flex (formules côte à côte) */
.even-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .even-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .even-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .even-cols   { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1180px) {
  .even-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------- Mosaïque éditoriale (destinations) ----------------------- */
.mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: var(--space-4);
  }
  .mosaic > :nth-child(7n+1) { grid-column: span 4; grid-row: span 2; }
  .mosaic > :nth-child(7n+2) { grid-column: span 2; }
  .mosaic > :nth-child(7n+3) { grid-column: span 2; }
  .mosaic > :nth-child(7n+4) { grid-column: span 3; }
  .mosaic > :nth-child(7n+5) { grid-column: span 3; }
  .mosaic > :nth-child(7n+6) { grid-column: span 2; }
  .mosaic > :nth-child(7n+7) { grid-column: span 4; }
}

/* ----------------------- Hero plein écran ----------------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  overflow: hidden;
}

@media (min-width: 1180px) {
  .hero { min-height: 80vh; }
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media > img,
.hero-media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: var(--rhythm-section);
  padding-inline: var(--pad-x);
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
}

/* Hero avec calque crème en bas pour lisibilité (non-gradient : opacité plate) */
.hero-veil::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: var(--paper);
  opacity: 0.78;
  z-index: 1;
}

/* ----------------------- Spacing utilities ----------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }

.py-0 { padding-block: 0; }
.py-3 { padding-block: var(--space-3); }
.py-5 { padding-block: var(--space-5); }
.py-7 { padding-block: var(--space-7); }

/* ----------------------- Texte alignement ----------------------- */
.t-left   { text-align: left; }
.t-center { text-align: center; }
.t-right  { text-align: right; }
.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }

/* ----------------------- Aspect-ratio helpers ----------------------- */
.ratio-portrait  { aspect-ratio: 4 / 5; }
.ratio-landscape { aspect-ratio: 16 / 9; }
.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-3-4       { aspect-ratio: 3 / 4; }
.ratio-4-5       { aspect-ratio: 4 / 5; }

.ratio-portrait > img,
.ratio-landscape > img,
.ratio-square > img,
.ratio-3-4 > img,
.ratio-4-5 > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}