/* ============================================================================
   SILLAGE — gabarit Studio (templates/page-studio.php)
   Compose main.css : .slg-grid, .slg-mat, .slg-meta, .slg-photo, .slg-fig,
   .slg-hero / .slg-display / .slg-h1 / .slg-h2 / .slg-h3, .slg-btn, .slg-page-rise.
   Desktop-first ; tablette portrait (≤ 1023, 8 colonnes) ; mobile (≤ 767).
   ============================================================================ */

/* --------------------------------------------------------------------------
   Entrée
   -------------------------------------------------------------------------- */
.slg-studio-entree { padding: calc(var(--nav-h) + var(--sp-10)) var(--marge) var(--section-sm); align-items: start; }
.slg-studio-entree__meta { grid-column: 1 / 3; }
.slg-studio-entree__title { grid-column: 1 / 12; margin-top: var(--sp-8); font-size: clamp(64px, 9.6vw, 170px); }
.slg-studio-entree__lead { grid-column: 3 / 8; margin-top: var(--sp-9); max-width: var(--measure); display: grid; gap: var(--sp-4); }
.slg-studio-entree__mat { grid-column: 10 / 13; margin-top: var(--sp-9); }

/* --------------------------------------------------------------------------
   Lumière
   -------------------------------------------------------------------------- */
.slg-studio-lumiere { padding: var(--section-sm) var(--marge) 0; align-items: start; }
.slg-studio-lumiere__label { display: none; grid-column: 1 / -1; }
.slg-studio-lumiere__title { grid-column: 1 / 6; }
.slg-studio-lumiere__text { grid-column: 7 / 12; display: grid; gap: var(--sp-5); }
.slg-studio-lumiere__p { max-width: var(--measure); text-wrap: pretty; }
.slg-studio-lumiere__fig { grid-column: 4 / 13; margin-top: var(--sp-9); }

/* --------------------------------------------------------------------------
   Nuit : image sticky, trois textes
   -------------------------------------------------------------------------- */
.slg-studio-nuit { background: var(--bg); color: var(--fg); padding: var(--section) var(--marge); margin-top: var(--section); align-items: start; }
.slg-studio-nuit__aside { grid-column: 1 / 6; position: sticky; top: calc(var(--nav-h) + var(--sp-7)); }
.slg-studio-nuit__blocs { grid-column: 7 / 13; display: grid; gap: var(--section-sm); padding-top: var(--sp-8); }
.slg-studio-nuit__bloc { display: grid; gap: var(--sp-5); }
.slg-studio-nuit__title { font-size: clamp(40px, 5vw, 88px); }
.slg-studio-nuit__text { display: grid; gap: var(--sp-4); }
.slg-studio-nuit__p { color: var(--fg-2); max-width: var(--measure); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Habiter + détail : deux colonnes asymétriques
   -------------------------------------------------------------------------- */
.slg-studio-habiter { padding: var(--section) var(--marge) 0; align-items: start; }
.slg-studio-habiter__head { grid-column: 1 / 5; display: grid; gap: var(--sp-5); }
.slg-studio-habiter__photo { grid-column: 5 / 8; margin-top: var(--sp-10); }
.slg-studio-habiter__detail { grid-column: 9 / 13; display: grid; gap: var(--sp-5); margin-top: var(--section-sm); }
.slg-studio-habiter__text { display: grid; gap: var(--sp-4); }
.slg-studio-habiter__p { color: var(--ombre); max-width: var(--measure-narrow); text-wrap: pretty; }
.slg-studio-habiter__mat { max-width: 240px; box-sizing: content-box; } /* 240 px de contenu + passe-partout, comme la maquette (content-box) */

/* --------------------------------------------------------------------------
   L'atelier : équipe
   -------------------------------------------------------------------------- */
.slg-studio-atelier { padding: var(--section) var(--marge) 0; align-items: start; }
.slg-studio-atelier__head { grid-column: 1 / 5; display: grid; gap: var(--sp-5); }
.slg-studio-atelier__text { display: grid; gap: var(--sp-4); }
.slg-studio-atelier__p { color: var(--ombre); max-width: var(--measure-narrow); text-wrap: pretty; }
.slg-studio-equipe { grid-column: 6 / 13; border-top: 1px solid var(--line); }
.slg-studio-equipe__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--gutter); padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.slg-studio-equipe__nom { font-weight: 400; }
.slg-studio-equipe__role { font: var(--type-small); color: var(--ombre); }

/* --------------------------------------------------------------------------
   Deux ateliers
   -------------------------------------------------------------------------- */
.slg-studio-lieux { padding: var(--section) var(--marge) 0; gap: var(--section-sm) var(--gutter); align-items: end; }
.slg-studio-lieux__item { display: grid; gap: var(--sp-5); }
.slg-studio-lieux__item--marseille { grid-column: 1 / 6; }
.slg-studio-lieux__item--paris { grid-column: 7 / 13; margin-bottom: var(--sp-10); }
.slg-studio-lieux__text { display: grid; gap: var(--sp-3); }
.slg-studio-lieux__p { font: var(--type-small); color: var(--ombre); }

/* --------------------------------------------------------------------------
   Vers le contact
   -------------------------------------------------------------------------- */
.slg-studio-cta { padding: var(--section) var(--marge); align-items: end; }
.slg-studio-cta__title { grid-column: 1 / 10; font-size: clamp(48px, 7vw, 124px); }
.slg-studio-cta__action { grid-column: 10 / 13; justify-self: end; }

/* --------------------------------------------------------------------------
   Tablette portrait : grille 8 colonnes, sticky désactivé, 5/7 → 3/5, 21/9 → 16/9
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .slg-studio-entree__meta { grid-column: 1 / -1; }
  .slg-studio-entree__title { grid-column: 1 / -1; }
  .slg-studio-entree__lead { grid-column: 1 / 6; }
  .slg-studio-entree__mat { grid-column: 6 / 9; }

  .slg-studio-lumiere__label { display: flex; }
  .slg-studio-lumiere__title { grid-column: 1 / 4; }
  .slg-studio-lumiere__text { grid-column: 4 / 9; }
  .slg-studio-lumiere__fig { grid-column: 2 / 9; }
  .slg-studio-lumiere__fig .slg-photo { aspect-ratio: 16 / 9; }

  .slg-studio-nuit__aside { grid-column: 1 / 5; position: static; }
  .slg-studio-nuit__blocs { grid-column: 1 / -1; padding-top: var(--sp-8); }

  .slg-studio-habiter__head { grid-column: 1 / 5; }
  .slg-studio-habiter__photo { grid-column: 5 / 9; }
  .slg-studio-habiter__detail { grid-column: 1 / 5; }

  .slg-studio-atelier__head { grid-column: 1 / 4; }
  .slg-studio-atelier__title { text-wrap: balance; } /* le <br> est masqué (.slg-h) : balance décide */
  .slg-studio-equipe { grid-column: 4 / 9; }

  .slg-studio-lieux__item--marseille { grid-column: 1 / 4; }
  .slg-studio-lieux__item--paris { grid-column: 4 / 9; }

  .slg-studio-cta__title { grid-column: 1 / 6; }
  .slg-studio-cta__action { grid-column: 6 / 9; }
}

/* --------------------------------------------------------------------------
   Mobile : maquette « Sillage Mobile Studio »
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .slg-studio-entree, .slg-studio-lumiere, .slg-studio-nuit, .slg-studio-habiter,
  .slg-studio-atelier, .slg-studio-lieux, .slg-studio-cta { grid-template-columns: 1fr; }
  .slg-studio-entree > *, .slg-studio-lumiere > *, .slg-studio-nuit > *, .slg-studio-habiter > *,
  .slg-studio-atelier > *, .slg-studio-lieux > *, .slg-studio-cta > * { grid-column: 1 / -1; }

  /* Légendes : une seule ligne, tiret entre les deux parties */
  .slg-studio-fig .slg-fig__cap { justify-content: flex-start; gap: 0 10px; }
  .slg-studio-fig .slg-fig__cap span + span::before { content: "— "; opacity: .45; }

  /* Entrée */
  .slg-studio-entree { padding: calc(var(--nav-h) + 56px) var(--marge) 0; gap: 28px; }
  .slg-studio-entree__title { margin-top: 0; font-size: clamp(52px, 16vw, 84px); }
  .slg-studio-entree__lead { margin-top: 0; max-width: none; }
  .slg-studio-entree__mat { margin-top: 0; width: 56%; justify-self: end; box-sizing: content-box; }

  /* Lumière */
  .slg-studio-lumiere { padding: var(--section-sm) var(--marge) 0; gap: var(--sp-5); }
  .slg-studio-lumiere__p { max-width: none; }
  .slg-studio-lumiere__fig { margin: var(--sp-4) calc(-1 * var(--marge)) 0; gap: 10px; }
  .slg-studio-lumiere__fig .slg-photo { aspect-ratio: 4 / 5; }
  .slg-studio-lumiere__fig .slg-fig__cap { padding: 0 var(--marge); }

  /* Nuit : l'image en tête, la colonne sticky devient une séquence */
  .slg-studio-nuit { padding: var(--section-sm) var(--marge); margin-top: var(--section-sm); gap: 56px; }
  .slg-studio-nuit__aside { width: 78%; }
  .slg-studio-nuit__fig { gap: 10px; }
  .slg-studio-nuit__blocs { gap: 56px; padding-top: 0; }
  .slg-studio-nuit__bloc { gap: var(--sp-4); }
  .slg-studio-nuit__title { font-size: clamp(32px, 9vw, 44px); }
  .slg-studio-nuit__p { max-width: none; }

  /* Habiter + détail */
  .slg-studio-habiter { padding: var(--section-sm) var(--marge) 0; gap: 0; }
  .slg-studio-habiter__head { gap: var(--sp-4); }
  .slg-studio-habiter__p { max-width: none; }
  .slg-studio-habiter__photo { width: 62%; justify-self: end; margin-top: var(--sp-5); }
  .slg-studio-habiter__detail { margin-top: 48px; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--gutter); align-items: start; }
  .slg-studio-habiter__detail > .slg-studio-habiter__label,
  .slg-studio-habiter__detail > .slg-studio-habiter__title { grid-column: 1 / -1; }
  .slg-studio-habiter__mat { max-width: none; }

  /* L'atelier */
  .slg-studio-atelier { padding: var(--section-sm) var(--marge) 0; gap: var(--sp-5); }
  .slg-studio-atelier__p { max-width: none; }
  .slg-studio-equipe { margin-top: var(--sp-2); }
  .slg-studio-equipe__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: var(--sp-4) 0; }
  .slg-studio-equipe__nom { grid-column: 1; grid-row: 1; }
  .slg-studio-equipe__ville { grid-column: 2; grid-row: 1; }
  .slg-studio-equipe__role { grid-column: 1 / 3; grid-row: 2; }

  /* Deux ateliers */
  .slg-studio-lieux { padding: var(--section-sm) var(--marge) 0; gap: 48px; }
  .slg-studio-lieux__item { gap: var(--sp-4); }
  .slg-studio-lieux__item--paris { width: 84%; justify-self: end; margin-bottom: 0; }

  /* Vers le contact */
  .slg-studio-cta { padding: var(--section-sm) var(--marge); gap: var(--sp-5); align-items: start; justify-items: start; }
  .slg-studio-cta__title { font-size: clamp(40px, 12vw, 60px); }
  .slg-studio-cta__action { justify-self: start; }
}