/* Ajustements éditoriaux finaux — 17/08/2026 */

/*
 * Palette premium commune à la page Créations et aux quatre fiches projet.
 * Les variantes sombres gardent l'identité de chaque création sans couleurs criardes.
 */
body.project-girls {
  --project-color: #6f302f !important;
  --project-accent: #8f514b !important;
  --project-soft: #eaded9 !important;
  --project-dark: #1c0c0c !important;
  --project-deep: #0e0707 !important;
  --project-accent-dark: #4b1f1f !important;
  --project-accent-soft: #c99a91 !important;
  --girls-yellow: #6f302f !important;
  --girls-yellow-dark: #4b1f1f !important;
}

body.project-songe {
  --project-color: #314f3d !important;
  --project-accent: #577560 !important;
  --project-soft: #dde5df !important;
  --project-dark: #0c1812 !important;
  --project-deep: #070e0a !important;
  --project-accent-dark: #203729 !important;
  --project-accent-soft: #9eb2a3 !important;
}

body.project-premier {
  --project-color: #2d5062 !important;
  --project-accent: #567789 !important;
  --project-soft: #dce5e9 !important;
  --project-dark: #0c171d !important;
  --project-deep: #070d11 !important;
  --project-accent-dark: #203b49 !important;
  --project-accent-soft: #9fb5c0 !important;
}

body.project-hiero {
  --project-color: #4f3a58 !important;
  --project-accent: #755c7e !important;
  --project-soft: #e5dfe7 !important;
  --project-dark: #171019 !important;
  --project-deep: #0c080d !important;
  --project-accent-dark: #392940 !important;
  --project-accent-soft: #b3a2b8 !important;
}

/* Fiches création : typographie nette et détails discrets. */
.project-page .girls-tech-card .section-kicker {
  background: none !important;
  color: var(--project-color) !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.project-page :is(.girls-intro-photo figcaption, .project-gallery-head p) {
  font-size: clamp(7px, .5vw, 9px) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  letter-spacing: .11em !important;
}

.project-page .girls-intro-photo figcaption {
  padding: 6px 10px !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page :is(.project-teaser, .project-gallery-head) h2 {
  color: #171713 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Le Songe : une puce noire, petite et régulière, devant chaque proposition. */
body.project-songe .songe-callout span {
  position: relative !important;
  padding-left: 1.05em !important;
}

body.project-songe .songe-callout span::before {
  content: "" !important;
  position: absolute !important;
  top: .66em !important;
  left: 0 !important;
  width: .28em !important;
  height: .28em !important;
  border-radius: 50% !important;
  background: #171713 !important;
  transform: translateY(-50%) !important;
}

body.project-songe .songe-callout > h3 {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: clamp(16px, 2vw, 24px) clamp(22px, 2.6vw, 36px) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--project-color), transparent 42%) !important;
  background: var(--refresh-paper-light) !important;
  color: #e0a62f !important;
  font-size: clamp(30px, 3.2vw, 48px) !important;
  line-height: .95 !important;
  text-shadow: none !important;
}

/* Chaque création reprend sa propre couleur pour les titres éditoriaux. */
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page :is(
  .girls-summary h2,
  .girls-summary h3,
  .girls-tech-card .section-kicker,
  .girls-tech-card dt
) {
  color: var(--project-color) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.project-songe .project-page .songe-callout > h3 {
  color: var(--project-color) !important;
  -webkit-text-fill-color: currentColor !important;
}

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

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .girls-hero {
  border-bottom-color: color-mix(in srgb, var(--project-color), transparent 28%) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  main :focus-visible {
  outline-color: var(--project-color) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .image-lightbox__count,
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .image-lightbox__close:is(:hover, :focus-visible),
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .image-lightbox__nav:is(:hover, :focus-visible) {
  border-color: var(--project-color) !important;
  color: var(--project-color) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .image-lightbox__close:is(:hover, :focus-visible),
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .image-lightbox__nav:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--project-color), transparent 86%) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .site-footer {
  border-top-color: color-mix(in srgb, var(--project-color), transparent 55%) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .site-footer::before {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--project-color), transparent 84%),
      transparent 46%,
      color-mix(in srgb, var(--project-color), transparent 86%)) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .footer-links a:hover {
  color: var(--project-color) !important;
}

/* Cadres, citations et galeries suivent eux aussi la teinte du projet. */
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .girls-summary .girls-inline-quote {
  border-left-color: var(--project-color) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  :is(.girls-intro-photo, .girls-tech-card, .project-gallery figure) {
  border-color: color-mix(in srgb, var(--project-color), transparent 44%) !important;
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--project-color), transparent 88%) !important;
}

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

/* Hero du Songe : image plus lumineuse, voile conservé uniquement pour la lecture. */
body.project-songe .songe-hero-video {
  filter: saturate(1.08) contrast(1.03) brightness(1.08) !important;
}

body.project-songe .project-hero-video-overlay {
  background:
    linear-gradient(90deg,
      rgba(5, 18, 11, .78) 0%,
      rgba(5, 18, 11, .50) 42%,
      rgba(5, 18, 11, .10) 68%,
      rgba(5, 18, 11, .04) 100%),
    linear-gradient(0deg,
      rgba(5, 18, 11, .24) 0%,
      rgba(5, 18, 11, .02) 58%,
      rgba(5, 18, 11, .14) 100%) !important;
}

/* Girls & Boys : retrait du cadre rouge sous le titre sans changer son échelle. */
body.project-girls .project-page .girls-hero h1 {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Le Premier Moi : la fiche technique occupe toute la largeur disponible. */
body.project-premier .girls-side-column {
  display: contents !important;
}

body.project-premier .girls-intro-photo {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.project-premier .girls-tech-card {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin-top: clamp(16px, 2vw, 28px) !important;
}

body.project-premier .girls-tech-card dl {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(28px, 4vw, 64px) !important;
  margin: 0 !important;
}

body.project-premier .girls-tech-card div {
  grid-template-columns: minmax(105px, 132px) minmax(0, 1fr) !important;
}

/* Contact : la scène nocturne devient le visuel principal. */
.contact-page .contact-hero {
  isolation: isolate !important;
  min-height: clamp(400px, 40vw, 520px) !important;
  display: grid !important;
  align-items: end !important;
  padding: clamp(112px, 12vw, 150px) 0 clamp(38px, 4vw, 54px) !important;
  background:
    linear-gradient(90deg,
      rgba(3, 4, 4, .96) 0%,
      rgba(3, 4, 4, .84) 31%,
      rgba(3, 4, 4, .46) 54%,
      rgba(3, 4, 4, .12) 76%,
      rgba(3, 4, 4, .34) 100%),
    url("../images/contact/contact-hero-forest-stage.jpg") left 52% / 118% auto no-repeat !important;
}

.contact-page .contact-hero::before {
  content: none !important;
  display: none !important;
}

.contact-page .contact-hero .container {
  position: relative !important;
  z-index: 1 !important;
}

.contact-page .contact-hero :is(h1, p, .section-kicker) {
  color: #fffaf0 !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .48) !important;
}

.contact-page .contact-hero p {
  max-width: 590px !important;
  margin-top: 12px !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.5 !important;
}

.contact-page .contact-hero h1 {
  max-width: 720px !important;
  margin: 10px 0 0 !important;
  font-size: clamp(58px, 6.5vw, 92px) !important;
  line-height: .88 !important;
}

.contact-page .contact-hero .section-kicker {
  font-size: 8px !important;
  letter-spacing: .25em !important;
}

.contact-page .contact-intro h2 {
  max-width: 100% !important;
  color: #171713 !important;
  font-size: clamp(28px, 2.65vw, 42px) !important;
  line-height: .96 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

/* Pied de page : plus court et plus resserré sur l’ensemble du site. */
.site-footer {
  min-height: 0 !important;
  padding: 15px 0 17px !important;
}

.site-footer::before {
  opacity: .38 !important;
}

.footer-row,
.creations-page .footer-row {
  width: min(1080px, calc(100% - 40px)) !important;
  gap: 14px !important;
}

.footer-copy {
  font-size: 7px !important;
  letter-spacing: .16em !important;
}

.footer-links {
  gap: 15px !important;
}

.footer-links a {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

@media (max-width: 980px) {
  body.project-premier .girls-intro-photo,
  body.project-premier .girls-tech-card {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 700px) {
  body.project-premier .girls-tech-card dl {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .contact-page .contact-hero {
    min-height: 470px !important;
    padding: 132px 0 44px !important;
    background:
      linear-gradient(90deg,
        rgba(3, 4, 4, .94) 0%,
        rgba(3, 4, 4, .78) 44%,
        rgba(3, 4, 4, .40) 100%),
      url("../images/contact/contact-hero-forest-stage.jpg") 58% center / cover no-repeat !important;
  }

  .contact-page .contact-hero h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 12vw, 50px) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }

  .contact-page .contact-hero p {
    max-width: 34ch !important;
    font-size: 14px !important;
    line-height: 1.48 !important;
  }

  .contact-page .contact-intro h2 {
    font-size: clamp(28px, 8vw, 36px) !important;
  }

  .site-footer {
    padding: 13px 0 15px !important;
  }

  .footer-row,
  .creations-page .footer-row {
    width: min(100% - 32px, 1080px) !important;
  }
}

/* Contact et Présentation : un seul gabarit de hero, calé sur Créations. */
:is(.presentation-page .presentation-hero, .contact-page .contact-hero) {
  height: clamp(560px, 66svh, 720px) !important;
  min-height: clamp(560px, 66svh, 720px) !important;
  max-height: 720px !important;
}

:is(.presentation-page .presentation-hero h1, .contact-page .contact-hero h1) {
  font-size: clamp(42px, 5vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.025em !important;
}

.presentation-page .presentation-hero__content {
  justify-content: flex-start !important;
}

.presentation-page .presentation-hero h1 {
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
  transform: none !important;
}

@media (max-width: 700px) {
  :is(.presentation-page .presentation-hero, .contact-page .contact-hero) {
    height: clamp(480px, 68svh, 620px) !important;
    min-height: clamp(480px, 68svh, 620px) !important;
    max-height: 620px !important;
  }

  :is(.presentation-page .presentation-hero h1, .contact-page .contact-hero h1) {
    font-size: clamp(42px, 12vw, 50px) !important;
  }
}

/* Titres projet : même axe gauche et mots toujours intacts. */
body.project-girls .project-page .girls-hero h1 {
  margin-left: 0 !important;
  padding-inline: 0 !important;
  text-align: left !important;
  transform: none !important;
}

body.project-hiero .project-page .girls-hero-content {
  width: min(76vw, 1040px) !important;
}

body.project-hiero .project-page .girls-hero h1 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(46px, 5.5vw, 90px) !important;
  letter-spacing: -.035em !important;
  white-space: nowrap !important;
}

@media (max-width: 700px) {
  body.project-hiero .project-page .girls-hero-content {
    width: 100% !important;
  }

  body.project-hiero .project-page .girls-hero h1 {
    font-size: clamp(28px, 8.5vw, 46px) !important;
  }
}

/* Fiches techniques : déclinaison du papier encadré de la page Contact. */
:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card {
  --tech-surface: color-mix(in srgb, var(--project-soft) 82%, var(--project-color));
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  padding:
    clamp(30px, 3.4vw, 52px)
    clamp(26px, 3.5vw, 54px)
    clamp(34px, 3.8vw, 58px)
    clamp(48px, 5vw, 78px) !important;
  border: clamp(11px, 1.2vw, 18px) solid #fffdf7 !important;
  border-radius: 0 !important;
  color: #211f1b !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--tech-surface) 88%, #f8f3e9),
      color-mix(in srgb, var(--tech-surface) 76%, #e9e0d3)),
    url("../images/paper-texture-generated.jpg") !important;
  background-size: auto, 760px auto !important;
  background-blend-mode: normal, soft-light !important;
  box-shadow:
    14px 14px 0 color-mix(in srgb, var(--project-color) 25%, #c9c1b7),
    0 28px 64px rgba(28, 24, 19, .12) !important;
  transition: transform 220ms cubic-bezier(.2, .78, .24, 1), box-shadow 220ms ease !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card::before {
  content: "" !important;
  position: absolute !important;
  top: clamp(30px, 3.4vw, 52px) !important;
  bottom: clamp(30px, 3.4vw, 52px) !important;
  left: clamp(18px, 2vw, 30px) !important;
  width: 5px !important;
  background: var(--project-color) !important;
  pointer-events: none !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card .section-kicker {
  display: block !important;
  margin: 0 0 clamp(26px, 3vw, 42px) !important;
  padding: 0 0 18px !important;
  color: var(--project-color) !important;
  font-family: "Climate Crisis", var(--font-title) !important;
  font-size: clamp(24px, 2.65vw, 42px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variation-settings: "YEAR" 1988 !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card .section-kicker::after {
  content: "" !important;
  display: block !important;
  width: 72px !important;
  height: 3px !important;
  margin-top: 17px !important;
  background: var(--project-color) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card div {
  display: grid !important;
  grid-template-columns: minmax(100px, 132px) minmax(0, 1fr) !important;
  gap: clamp(12px, 1.5vw, 22px) !important;
  align-items: start !important;
  padding: 11px 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--project-color), transparent 76%) !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card dt {
  padding-top: 10px !important;
  color: color-mix(in srgb, var(--project-color) 88%, #171713) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: .13em !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card :is(dd, dd a) {
  color: #292720 !important;
  font-size: clamp(14px, .95vw, 17px) !important;
  line-height: 1.48 !important;
}

:is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
  .project-page .girls-tech-card dd {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid color-mix(in srgb, var(--project-color), transparent 82%) !important;
  background: rgba(255, 253, 247, .76) !important;
  overflow-wrap: anywhere !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
    .project-page .girls-tech-card:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow:
      18px 18px 0 color-mix(in srgb, var(--project-color) 31%, #c9c1b7),
      0 34px 72px rgba(28, 24, 19, .15) !important;
  }
}

@media (max-width: 620px) {
  :is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
    .project-page .girls-tech-card {
    padding: 30px 22px 34px 42px !important;
    border-width: 9px !important;
    box-shadow: 9px 9px 0 color-mix(in srgb, var(--project-color) 25%, #c9c1b7) !important;
  }

  :is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
    .project-page .girls-tech-card::before {
    top: 28px !important;
    bottom: 28px !important;
    left: 17px !important;
    width: 4px !important;
  }

  :is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
    .project-page .girls-tech-card div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  :is(body.project-girls, body.project-songe, body.project-premier, body.project-hiero)
    .project-page .girls-tech-card dt {
    padding-top: 0 !important;
  }
}