/* ============================================================================
   SILLAGE — gabarit Projets (templates/page-projets.php)
   Compose les composants de main.css ; ne redéfinit aucun token.
   1. Entrée
   2. Index sticky / sommaire compact
   3. Séquence : cycle de six mises en page
   4. Passage vers le contact
   5. Responsive : 1023 / 767
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Entrée
   -------------------------------------------------------------------------- */
.slg-projets-entree { padding: calc(var(--nav-h) + var(--sp-10)) var(--marge) var(--section-sm); align-items: end; }
.slg-projets-entree__meta { grid-column: 1 / 3; align-self: start; }
.slg-projets-entree__titre { grid-column: 3 / 13; font-size: clamp(56px, 8.4vw, 150px); }
.slg-projets-entree__lead { grid-column: 3 / 8; margin-top: var(--sp-8); max-width: var(--measure); }
.slg-projets-entree__num { grid-column: 9 / 13; justify-self: end; font: 300 clamp(96px, 12vw, 220px) / 0.9 var(--font-mono); letter-spacing: -0.04em; color: var(--platre); }

/* --------------------------------------------------------------------------
   2. Index sticky (≥ 1024) et sommaire compact (≤ 1023)
   -------------------------------------------------------------------------- */
.slg-projets-liste { padding: var(--section-sm) var(--marge) 0; align-items: start; }

.slg-projets-index { grid-column: 1 / 4; position: sticky; top: calc(var(--nav-h) + var(--sp-7)); }
.slg-projets-index__list { display: grid; border-top: 1px solid var(--line); }
.slg-projets-index__item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--fg-2); transition: color var(--dur-2) var(--ease-out); }
.slg-projets-index__item .slg-dot { background: transparent; }
.slg-projets-index__item.is-active { color: var(--fg); }
.slg-projets-index__item.is-active .slg-dot { background: var(--accent); }
.slg-projets-index__titre { color: inherit; }
.slg-projets-index__num { font: var(--type-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; }

.slg-projets-sommaire { display: none; }
.slg-projets-sommaire__list { display: grid; border-top: 1px solid var(--line); }
.slg-projets-sommaire__item { border-bottom: 1px solid var(--line); }
.slg-projets-sommaire__link { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; min-height: 44px; opacity: 1; }
.slg-projets-sommaire__titre { color: var(--fg); }
.slg-projets-sommaire__num, .slg-projets-sommaire__type { font: var(--type-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--fg-2); }

/* --------------------------------------------------------------------------
   3. Séquence : cycle de six mises en page (grille interne de 8 colonnes)
   -------------------------------------------------------------------------- */
.slg-projets-seq { grid-column: 5 / 13; display: grid; gap: var(--section-sm); }
.slg-projets-item { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gutter); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); /* ancres #pN du sommaire sous le header fixe */ }
.slg-projets-item__photo { display: block; opacity: 1; }
.slg-projets-item__head { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.slg-projets-item__text { display: grid; gap: var(--sp-5); }
.slg-projets-item__titre a { display: inline-block; }
.slg-projets-item__lead { margin-top: var(--sp-4); color: var(--ombre); }
.slg-projets-item__body { color: var(--ombre); max-width: var(--measure-narrow); }
.slg-projets-item__btn { justify-self: start; }
.slg-projets-item__rect { width: 40px; height: 10px; background: var(--teinte); display: block; }

/* (1) image 3/2 pleine largeur, titre 1/5, lead 5/9 */
.slg-projets-item--1 { align-items: end; }
.slg-projets-item--1 .slg-projets-item__photo { grid-column: 1 / 9; }
.slg-projets-item--1 .slg-projets-item__head { grid-column: 1 / 5; }
.slg-projets-item--1 .slg-projets-item__lead { grid-column: 5 / 9; }

/* (2) bloc plein teinte : texte 1/4, image 4/5 en 5/9, bouton */
.slg-projets-item--2 { align-items: center; padding: var(--sp-8); }
.slg-projets-item--2 .slg-projets-item__text { grid-column: 1 / 4; }
.slg-projets-item--2 .slg-projets-item__photo { grid-column: 5 / 9; }

/* (3) image 1/1 en 1/5, texte 5/9 décalé et filet gauche */
.slg-projets-item--3 { align-items: start; }
.slg-projets-item--3 .slg-projets-item__photo { grid-column: 1 / 5; }
.slg-projets-item--3 .slg-projets-item__text { grid-column: 5 / 9; padding-top: var(--sp-9); padding-left: var(--sp-6); border-left: 1px solid var(--line); }

/* (4) texte 1/3, image 3/2 en 3/9 */
.slg-projets-item--4 { align-items: end; }
.slg-projets-item--4 .slg-projets-item__text { grid-column: 1 / 3; padding-bottom: var(--sp-4); }
.slg-projets-item--4 .slg-projets-item__body { max-width: none; }
.slg-projets-item--4 .slg-projets-item__photo { grid-column: 3 / 9; }

/* (5) bloc plein teinte : image 21/9 pleine largeur, titre 1/4, lead 5/9 */
.slg-projets-item--5 { align-items: end; padding: var(--sp-8) var(--sp-8) var(--sp-7); }
.slg-projets-item--5 .slg-projets-item__photo { grid-column: 1 / 9; }
.slg-projets-item--5 .slg-projets-item__head { grid-column: 1 / 4; }
.slg-projets-item--5 .slg-projets-item__lead { grid-column: 5 / 9; }

/* (6) texte 1/4 décalé, image 4/5 en 5/8 */
.slg-projets-item--6 { align-items: start; }
.slg-projets-item--6 .slg-projets-item__text { grid-column: 1 / 4; padding-top: var(--sp-8); }
.slg-projets-item--6 .slg-projets-item__photo { grid-column: 5 / 8; }

/* --------------------------------------------------------------------------
   4. Passage vers le contact
   -------------------------------------------------------------------------- */
.slg-projets-cta { margin-top: var(--section-sm); padding: var(--section) var(--marge); border-top: 1px solid var(--line); align-items: end; }
.slg-projets-cta__meta { grid-column: 1 / 3; align-self: start; }
.slg-projets-cta__titre { grid-column: 3 / 10; font-size: clamp(40px, 5.4vw, 96px); }
.slg-projets-cta__action { grid-column: 10 / 13; justify-self: end; }

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

/* Tablette paysage : rien à brider, le chiffre mono (12 vw) reste sous le plafond de 14 vw */

/* Tablette portrait : grille 8 colonnes, sticky désactivé → sommaire compact en tête */
@media (max-width: 1023px) {
  .slg-projets-entree__meta { grid-column: 1 / 9; }
  .slg-projets-entree__titre { grid-column: 1 / 9; }
  .slg-projets-entree__lead { grid-column: 1 / 6; margin-top: var(--sp-6); }
  .slg-projets-entree__num { grid-column: 6 / 9; }

  .slg-projets-index { display: none; }
  .slg-projets-sommaire { display: block; grid-column: 1 / 9; margin-bottom: var(--section-sm); }
  .slg-projets-seq { grid-column: 1 / 9; }

  .slg-projets-item--2, .slg-projets-item--5 { padding: 40px; }
  .slg-projets-item--2 .slg-projets-item__text { grid-column: 1 / 4; }
  .slg-projets-item--3 .slg-projets-item__text { padding-top: var(--sp-7); }
  .slg-projets-item--4 .slg-projets-item__text { grid-column: 1 / 4; }
  .slg-projets-item--4 .slg-projets-item__photo { grid-column: 4 / 9; }
  .slg-projets-item--5 .slg-projets-item__photo .slg-photo { aspect-ratio: 16 / 9; }
  .slg-projets-item--6 .slg-projets-item__photo { grid-column: 5 / 9; }

  .slg-projets-cta__meta, .slg-projets-cta__titre { grid-column: 1 / 9; }
  .slg-projets-cta__action { grid-column: 1 / 9; justify-self: start; }
}

/* Mobile : maquette « Sillage Mobile Projets » */
@media (max-width: 767px) {
  .slg-projets-entree { padding: 120px var(--marge) 48px; grid-template-columns: 1fr auto; gap: 24px 20px; align-items: end; }
  .slg-projets-entree__meta, .slg-projets-entree__titre { grid-column: 1 / 3; }
  .slg-projets-entree__titre { font-size: clamp(48px, 14vw, 72px); }
  .slg-projets-entree__lead { grid-column: 1; margin-top: 0; }
  .slg-projets-entree__num { grid-column: 2; justify-self: end; font-size: clamp(72px, 22vw, 110px); }

  .slg-projets-liste { display: block; padding: 0; } /* l'entrée (48 px) enchaîne directement sur le sommaire */
  .slg-projets-sommaire { margin: 0 var(--marge) var(--section-sm); }
  .slg-projets-seq { display: grid; gap: var(--section-sm); }

  /* Empilement : une colonne, 20 px entre les blocs, marges 20 px */
  .slg-projets-item { grid-template-columns: 1fr; gap: 20px; padding: 0 var(--marge); align-items: start; }
  .slg-projets-item .slg-projets-item__photo,
  .slg-projets-item .slg-projets-item__lead,
  .slg-projets-item .slg-projets-item__head,
  .slg-projets-item .slg-projets-item__text { grid-column: 1 / -1; width: 100%; padding: 0; }
  .slg-projets-item__head, .slg-projets-item__text { display: contents; }
  .slg-projets-item__lead { margin-top: 0; }
  .slg-projets-item__body { max-width: none; }

  /* Variantes 2, 4, 6 : meta, titre, image, texte, bouton */
  .slg-projets-item--2 .slg-projets-item__meta, .slg-projets-item--4 .slg-projets-item__meta, .slg-projets-item--6 .slg-projets-item__meta { order: 1; }
  .slg-projets-item--2 .slg-projets-item__titre, .slg-projets-item--4 .slg-projets-item__titre, .slg-projets-item--6 .slg-projets-item__titre { order: 2; }
  .slg-projets-item--2 .slg-projets-item__photo, .slg-projets-item--4 .slg-projets-item__photo, .slg-projets-item--6 .slg-projets-item__photo { order: 3; }
  .slg-projets-item--2 .slg-projets-item__body, .slg-projets-item--4 .slg-projets-item__body, .slg-projets-item--6 .slg-projets-item__body { order: 4; }
  .slg-projets-item--2 .slg-projets-item__btn { order: 5; }

  /* Blocs pleine teinte */
  .slg-projets-item--2, .slg-projets-item--5 { padding: 32px var(--marge) 40px; }

  /* Décalages et ratios de la maquette mobile */
  .slg-projets-item--1 .slg-projets-item__photo .slg-photo { aspect-ratio: 4 / 5; }
  .slg-projets-item--2 .slg-projets-item__photo { width: 84%; justify-self: end; }
  .slg-projets-item--3 .slg-projets-item__photo { width: 70%; }
  .slg-projets-item--3 .slg-projets-item__text { display: grid; gap: 16px; padding: 0 0 0 16px; border-left: 1px solid var(--line); }
  .slg-projets-item--5 .slg-projets-item__photo .slg-photo { aspect-ratio: 4 / 5; }
  .slg-projets-item--6 .slg-projets-item__photo { width: 60%; justify-self: end; }

  /* Vers le contact */
  .slg-projets-cta { margin: var(--section-sm) var(--marge) 0; padding: 40px 0 var(--section-sm); grid-template-columns: 1fr; gap: 24px; justify-items: start; }
  .slg-projets-cta__meta, .slg-projets-cta__titre, .slg-projets-cta__action { grid-column: 1; justify-self: start; }
  .slg-projets-cta__titre { font-size: clamp(34px, 9.6vw, 48px); }
}