/* Harmonisation des fiches projet avec la direction éditoriale de Girls & Boys. */

:is(body.project-songe, body.project-premier, body.project-hiero) {
  --refresh-paper: #f3efe4;
  --refresh-paper-light: #fffaf0;
  --refresh-ink: #171713;
  --refresh-muted: #5f5b51;
  --refresh-yellow: #e0a62f;
}

/* Retire les anciennes baguettes décoratives qui traversaient le haut du hero. */
:is(body.project-songe, body.project-premier, body.project-hiero) .project-page .girls-hero::before {
  content: none !important;
  display: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .project-page .girls-hero h1 {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  font-size: clamp(46px, 5.25vw, 82px) !important;
  line-height: .94 !important;
}

body.project-premier .project-page .girls-hero {
  background-image:
    linear-gradient(90deg,
      rgba(4, 12, 16, .97) 0%,
      rgba(4, 12, 16, .86) 29%,
      rgba(4, 12, 16, .36) 52%,
      rgba(4, 12, 16, .10) 72%,
      rgba(4, 12, 16, .32) 100%),
    url("../images/premier-moi/premier-moi-hero-visage.jpg") !important;
  background-position: center center !important;
}

/* Même respiration claire et même échelle de lecture sous chaque hero. */
:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-section,
:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery-section {
  border-color: color-mix(in srgb, var(--project-color), transparent 50%) !important;
  background: var(--refresh-paper) !important;
  color: var(--refresh-ink) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-section {
  padding: clamp(18px, 2vw, 28px) 0 clamp(76px, 9vw, 140px) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-section::before,
:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery-section::before {
  content: none !important;
  display: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-grid {
  width: min(1500px, calc(100% - 72px)) !important;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .54fr) !important;
  gap: clamp(34px, 5.4vw, 92px) !important;
  align-items: start !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--refresh-ink) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary::before {
  content: none !important;
  display: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary h2 {
  max-width: 920px !important;
  margin: 0 0 clamp(22px, 2.8vw, 38px) !important;
  color: var(--refresh-yellow) !important;
  font-size: clamp(46px, 5.6vw, 82px) !important;
  line-height: .94 !important;
  text-shadow: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary h3 {
  margin: clamp(30px, 4vw, 52px) 0 14px !important;
  color: var(--refresh-yellow) !important;
  font-size: clamp(18px, 1.7vw, 28px) !important;
  line-height: 1.12 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary p,
:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery-head p {
  max-width: 880px !important;
  color: var(--refresh-ink) !important;
  font-size: clamp(16px, 1.04vw, 19px) !important;
  font-weight: 500 !important;
  line-height: 1.72 !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary .section-kicker,
:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card .section-kicker,
:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery-head .section-kicker {
  color: var(--refresh-yellow) !important;
  text-transform: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-side-column {
  gap: clamp(22px, 3vw, 40px) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-photo {
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--project-color), transparent 45%) !important;
  border-radius: 0 !important;
  background: var(--refresh-paper-light) !important;
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--project-color), transparent 88%) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-photo img {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 11 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  transform: none !important;
  box-shadow: none !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-photo figcaption {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
  background: var(--refresh-ink) !important;
  color: var(--refresh-paper-light) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card {
  padding: clamp(22px, 2.8vw, 38px) !important;
  border: 1px solid color-mix(in srgb, var(--project-color), transparent 48%) !important;
  border-top: 5px solid var(--refresh-yellow) !important;
  border-radius: 0 !important;
  background: var(--refresh-paper-light) !important;
  color: var(--refresh-ink) !important;
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--project-color), transparent 90%) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card dd,
:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card a {
  color: var(--refresh-ink) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card dt {
  color: var(--project-color) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .girls-tech-card div {
  border-color: color-mix(in srgb, var(--project-color), transparent 78%) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery figure {
  border: 1px solid color-mix(in srgb, var(--project-color), transparent 55%) !important;
  border-radius: 0 !important;
  background: var(--refresh-paper-light) !important;
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--project-color), transparent 90%) !important;
}

:is(body.project-songe, body.project-premier, body.project-hiero) .project-gallery img {
  border-radius: 0 !important;
}

/* Le Songe : huit idées distribuées en deux colonnes, une phrase par ligne. */
body.project-songe .songe-callout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1px !important;
  margin: clamp(26px, 3.8vw, 50px) 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--project-color), transparent 42%) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--project-color), transparent 78%) !important;
  box-shadow: none !important;
}

body.project-songe .songe-callout p {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 36px) !important;
  background: var(--refresh-paper-light) !important;
  color: var(--refresh-ink) !important;
  font-size: clamp(15px, 1vw, 18px) !important;
  font-weight: 750 !important;
  line-height: 1.5 !important;
}

body.project-songe .songe-callout span {
  display: block;
}

body.project-songe .songe-callout span + span {
  margin-top: .68em;
}

/* Le Premier Moi : l’affiche reste un rectangle autonome, sans fond d’encadré. */
body.project-premier .girls-intro-photo {
  width: min(100%, 430px) !important;
  justify-self: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.project-premier .girls-intro-photo img {
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

body.project-premier .project-gallery--premier .is-poster {
  height: auto !important;
  padding: 0 !important;
  align-self: start !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.project-premier .project-gallery--premier .is-poster img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
}

@media (max-width: 980px) {
  :is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-grid {
    width: min(100% - 36px, 1500px) !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  :is(body.project-songe, body.project-premier, body.project-hiero) .girls-intro-section {
    padding-top: 16px !important;
  }

  :is(body.project-songe, body.project-premier, body.project-hiero) .project-page .girls-hero h1 {
    font-size: clamp(32px, 9.4vw, 42px) !important;
  }

  :is(body.project-songe, body.project-premier, body.project-hiero) .girls-summary h2 {
    font-size: clamp(34px, 10.4vw, 42px) !important;
    line-height: .96 !important;
  }

  body.project-songe .songe-callout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}