/* ============================================================================
   SILLAGE — fiche projet (single-projet.php)
   Préfixe .slg-projet-* ; compose les composants de main.css (grille, meta,
   bouton, photo, figure, listes, ScrollGrow .slg-sg__*, passage .slg-strip__*).
   Desktop-first : 1180 / 1023 / 767.
   ============================================================================ */

/* Cibles tactiles : zone de clic élargie des boutons texte, sans changer leur dessin */
.slg-projet .slg-btn--text { position: relative; }
.slg-projet .slg-btn--text::before { content: ""; position: absolute; inset: -10px 0; }

/* --------------------------------------------------------------------------
   1. Entrée plein teinte
   -------------------------------------------------------------------------- */
.slg-projet-entree { min-height: 100vh; padding: calc(var(--nav-h) + var(--sp-8)) var(--marge) var(--sp-7); display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-8); }
.slg-projet-entree__meta { grid-column: 1 / 7; }
.slg-projet-entree__back { grid-column: 11 / 13; justify-self: end; }
/* Titre : max-width en em pour que deux mots (« Villa Endoume ») se posent sur deux lignes, comme la maquette */
.slg-projet-entree__title { align-self: end; font: var(--type-hero); letter-spacing: var(--ls-display); font-size: clamp(88px, 13vw, 240px); line-height: .9; text-wrap: balance; max-width: 5em; }
.slg-projet-entree__foot { align-items: end; }
.slg-projet-entree__lead { grid-column: 1 / 6; font: var(--type-h2); letter-spacing: var(--ls-heading); font-weight: 300; text-wrap: balance; }
.slg-projet-entree__intro { grid-column: 7 / 11; font: var(--type-body); color: var(--ombre); max-width: var(--measure-narrow); }
.slg-projet-entree__scroll { grid-column: 11 / 13; justify-self: end; }

/* --------------------------------------------------------------------------
   2. Image hero — ScrollGrow (260vh, départ 34vw × 42.5vw)
   -------------------------------------------------------------------------- */
.slg-projet-hero { --sg-w0: 34vw; --sg-h0: 42.5vw; --sg-track: 260vh; }
.slg-projet-hero__cap { left: var(--marge); right: var(--marge); bottom: var(--sp-6); display: grid; gap: 8px; font: var(--type-body); letter-spacing: 0; text-transform: none; max-width: var(--measure); }
.slg-projet-hero__cap .slg-meta { color: var(--craie); }
.slg-projet-hero__phrase { font: var(--type-h3); letter-spacing: var(--ls-heading); font-weight: 300; color: var(--craie); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   3. Introduction + informations
   -------------------------------------------------------------------------- */
.slg-projet-intro { padding: var(--section) var(--marge) 0; align-items: start; }
.slg-projet-intro__meta { grid-column: 1 / 3; }
.slg-projet-intro__phrase { grid-column: 3 / 9; font: var(--type-display); letter-spacing: var(--ls-display); font-size: clamp(36px, 4.4vw, 76px); text-wrap: balance; }
.slg-projet-intro__infos { grid-column: 10 / 13; }

/* --------------------------------------------------------------------------
   4. Surface — chiffre colossal
   -------------------------------------------------------------------------- */
.slg-projet-surface { padding: var(--section-sm) var(--marge) 0; align-items: end; }
.slg-projet-surface__num { grid-column: 1 / 7; font: 300 clamp(120px, 17vw, 300px) / .85 var(--font-mono); letter-spacing: -0.05em; }
.slg-projet-surface__unit { font-size: .22em; letter-spacing: 0; vertical-align: baseline; margin-left: .1em; }
.slg-projet-surface__text { grid-column: 8 / 12; margin-bottom: var(--sp-3); font: var(--type-lead); color: var(--ombre); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   5. Récit — colonne sticky + grille de figures (7 colonnes)
   -------------------------------------------------------------------------- */
.slg-projet-recit { padding: var(--section) var(--marge) 0; align-items: start; }
.slg-projet-recit__col { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + var(--sp-8)); align-self: start; display: grid; gap: var(--sp-6); }
.slg-projet-recit__title { font: var(--type-h1); letter-spacing: var(--ls-heading); }
.slg-projet-recit__text { display: grid; gap: var(--sp-6); }
.slg-projet-recit__text p { font: var(--type-body); color: var(--ombre); max-width: var(--measure-narrow); text-wrap: pretty; }
.slg-projet-recit__figs { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-9) var(--gutter); }
.slg-projet-recit__fig.is-0 { grid-column: 1 / 6; }
.slg-projet-recit__fig.is-1 { grid-column: 3 / 8; }
.slg-projet-recit__fig.is-2 { grid-column: 1 / 4; }

/* --------------------------------------------------------------------------
   6. Passage horizontal — matières et seuils
   -------------------------------------------------------------------------- */
.slg-projet-strip { margin-top: var(--section); }
/* Largeur du texte comme la maquette (34vw hors padding, content-box) */
.slg-projet-strip .slg-strip__text { box-sizing: content-box; }
.slg-projet-strip__phrase { font: var(--type-h2); letter-spacing: var(--ls-heading); font-weight: 300; text-wrap: balance; }

/* --------------------------------------------------------------------------
   7. Crédits
   -------------------------------------------------------------------------- */
.slg-projet-credits { padding: var(--section-sm) var(--marge) var(--section); align-items: start; }
.slg-projet-credits__meta { grid-column: 1 / 3; }
.slg-projet-credits__list { grid-column: 3 / 9; }
.slg-projet-credits__aside { grid-column: 10 / 13; display: grid; gap: var(--sp-4); justify-items: start; }
.slg-projet-credits__note { font: var(--type-small); color: var(--pierre); max-width: var(--measure-narrow); }

/* --------------------------------------------------------------------------
   8. Projet suivant — bloc lien pleine teinte
   -------------------------------------------------------------------------- */
.slg-projet-next { min-height: 80vh; margin-top: var(--section); padding: var(--section-sm) var(--marge); align-items: end; color: var(--fg); opacity: 1; }
.slg-projet-credits + .slg-projet-next { margin-top: 0; }
.slg-projet-next:hover { opacity: 1; }
.slg-projet-next__body { grid-column: 1 / 7; align-self: end; display: grid; gap: var(--sp-6); justify-items: start; }
.slg-projet-next__title { font: var(--type-hero); letter-spacing: var(--ls-display); font-size: clamp(64px, 9vw, 160px); line-height: .9; text-wrap: balance; }
.slg-projet-next__lead { font: var(--type-lead); color: var(--ombre); }
.slg-projet-next__cta { justify-self: stretch; }
.slg-projet-next__media { grid-column: 8 / 13; }
@media (hover: hover) {
  .slg-projet-next:hover .slg-projet-next__media > * { transform: scale(var(--hover-scale)); }
  .slg-projet-next:hover .slg-projet-next__cta { background: var(--fg); color: var(--bg); }
}

/* Respiration avant le footer quand la page se termine sans crédits ni projet suivant */
.slg-projet > :last-child:not(.slg-projet-next):not(.slg-projet-credits) { margin-bottom: var(--section); }

/* --------------------------------------------------------------------------
   Tablette paysage (1024–1180) : ScrollGrow 46vw, course 240vh
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1180px) {
  .slg-projet-hero { --sg-w0: 46vw; --sg-h0: 57.5vw; --sg-track: 240vh; }
}

/* --------------------------------------------------------------------------
   Tablette portrait (≤ 1023) : grille 8 colonnes, sticky désactivés
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .slg-projet-entree { padding-left: 40px; padding-right: 40px; }
  .slg-projet-entree__meta { grid-column: 1 / 5; }
  .slg-projet-entree__back { grid-column: 7 / 9; }
  .slg-projet-entree__title { font-size: 15vw; max-width: none; }
  .slg-projet-entree__lead { grid-column: 1 / 5; }
  .slg-projet-entree__intro { grid-column: 5 / 9; }
  .slg-projet-entree__scroll { grid-column: 5 / 9; justify-self: start; }

  .slg-projet-hero { --sg-w0: 60vw; --sg-h0: 75vw; --sg-track: 200vh; }

  .slg-projet-intro__meta { grid-column: 1 / 9; }
  .slg-projet-intro__phrase { grid-column: 1 / 6; }
  .slg-projet-intro__infos { grid-column: 6 / 9; }

  .slg-projet-surface__num { grid-column: 1 / 5; font-size: 14vw; }
  .slg-projet-surface__text { grid-column: 5 / 9; }

  .slg-projet-recit__col { grid-column: 1 / 9; position: static; }
  .slg-projet-recit__figs { grid-column: 1 / 9; }

  .slg-projet-credits__meta { grid-column: 1 / 9; }
  .slg-projet-credits__list { grid-column: 1 / 6; }
  .slg-projet-credits__aside { grid-column: 6 / 9; }

  .slg-projet-next__body { grid-column: 1 / 5; }
  .slg-projet-next__media { grid-column: 5 / 9; }
}

/* --------------------------------------------------------------------------
   Mobile (≤ 767) : maquette « Sillage Mobile Projet »
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .slg-projet-entree { padding: calc(var(--nav-h) + 40px) var(--marge) 40px; gap: var(--sp-6); }
  .slg-projet-entree__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); }
  .slg-projet-entree__title { font-size: clamp(64px, 20vw, 100px); }
  .slg-projet-entree__foot { grid-template-columns: 1fr; gap: 20px; }
  .slg-projet-entree__lead, .slg-projet-entree__intro, .slg-projet-entree__scroll { grid-column: 1 / -1; justify-self: start; max-width: none; }

  .slg-projet-hero { --sg-w0: 70vw; --sg-h0: 87.5vw; --sg-track: 200vh; }

  .slg-projet-intro { padding-top: var(--section-sm); grid-template-columns: 1fr; row-gap: var(--sp-6); }
  .slg-projet-intro__meta, .slg-projet-intro__phrase, .slg-projet-intro__infos { grid-column: 1 / -1; }
  .slg-projet-intro__phrase { font-size: clamp(32px, 9vw, 44px); }

  .slg-projet-surface { grid-template-columns: 1fr; row-gap: var(--sp-4); }
  .slg-projet-surface__num, .slg-projet-surface__text { grid-column: 1 / -1; }
  .slg-projet-surface__num { font-size: clamp(96px, 30vw, 150px); }
  .slg-projet-surface__text { margin-bottom: 0; }

  /* Récit : texte puis figures décalées (78 % à droite, 56 % à gauche) */
  .slg-projet-recit { padding-top: var(--section-sm); grid-template-columns: 1fr; row-gap: var(--sp-5); }
  /* Maquette mobile : meta, titre, 1er paragraphe, 1re figure, suite du texte, figures suivantes.
     Colonne, texte et grille de figures deviennent transparents : tout est item de la grille de section, ordonné en CSS. */
  .slg-projet-recit__col, .slg-projet-recit__text, .slg-projet-recit__figs { display: contents; }
  .slg-projet-recit__text > * { order: 2; }
  .slg-projet-recit__text > :first-child { order: 0; }
  .slg-projet-recit__figs > .slg-projet-recit__fig { order: 3; }
  .slg-projet-recit__figs > .slg-projet-recit__fig:first-child { order: 1; }
  /* Sélecteurs .is-* répétés pour battre les placements desktop (spécificité 0,2,0) */
  .slg-projet-recit__fig, .slg-projet-recit__fig.is-0, .slg-projet-recit__fig.is-1, .slg-projet-recit__fig.is-2 { grid-column: 1 / -1; gap: 10px; }
  .slg-projet-recit__fig.is-0, .slg-projet-recit__fig.is-1 { margin-top: var(--sp-5); } /* 48 px avant les deux premières figures, comme la maquette */
  .slg-projet-recit__fig.is-1 { width: 78%; justify-self: end; }
  .slg-projet-recit__fig.is-2 { width: 56%; }
  /* Légende sur une ligne « Séjour, ouverture sud — 8 h 10 » : dé-justifiée, tiret ajouté en CSS */
  .slg-projet-recit__fig .slg-fig__cap.is-justify { justify-content: flex-start; gap: 0 10px; }
  .slg-projet-recit__fig .slg-fig__cap > span + span::before { content: "— "; opacity: .45; }

  /* Bande tactile : titre court « Matières et seuils » */
  .slg-projet-strip { margin-top: var(--section-sm); }
  .slg-projet-strip__pre { display: none; }
  .slg-projet-strip .slg-strip__title::first-letter { text-transform: uppercase; }

  .slg-projet-credits { padding: var(--section-sm) var(--marge); grid-template-columns: 1fr; row-gap: var(--sp-5); }
  .slg-projet-credits__meta, .slg-projet-credits__list, .slg-projet-credits__aside { grid-column: 1 / -1; }
  .slg-projet-credits__aside { gap: var(--sp-3); }

  /* Projet suivant : empilé, image 70 % à droite entre le titre et l'accroche */
  .slg-projet-next { min-height: 0; margin-top: var(--section-sm); padding: var(--sp-7) var(--marge); grid-template-columns: 1fr; row-gap: var(--sp-5); align-items: start; }
  .slg-projet-credits + .slg-projet-next { margin-top: 0; }
  .slg-projet-next__body { display: contents; }
  .slg-projet-next__meta { order: 1; }
  .slg-projet-next__title { order: 2; font-size: clamp(48px, 15vw, 76px); }
  .slg-projet-next__media { order: 3; grid-column: 1 / -1; width: 70%; justify-self: end; }
  .slg-projet-next__lead { order: 4; }
  .slg-projet-next__cta { order: 5; justify-self: stretch; }
}